This is probably a relatively simple CSS situation but now working in React and also trying to display an Image component inline in the nav things are getting difficult –
I have an animated nav I took and tweaked from https://codepen.io/littlesnippets/pen/OyxyRG and I need to float it right. I want to display my Image inline at the same horizontal position as the nav items and float it left so the whole nav looks like:
Here’s what I have, which aligns everything to center:
<main className={styles.main}>
<div className={styles.nav}>
<Image className={styles.navIcon} src={icon} width={40} height={40} />
<ul className={styles.snip1168}>
<li className={styles.current}><a href="#" data-hover="Work">Work</a></li>
<li><a href="#" data-hover="Recs">Recs</a></li>
<li><a href="#" data-hover="Say Hi">Say Hi</a></li>
</ul>
</div>
CSS:
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Start custom nav */
.nav {
margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
}
.snip1168 a {
padding: 0.5em 0;
padding-top: 2.4em; /* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
}
.snip1168 a:before,
.snip1168 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 a:before {
top: 0;
display: block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 a:hover:before,
.snip1168 .current a:before {
opacity: 1;
width: 100%;
}
.snip1168 a:hover:after,
.snip1168 .current a:after {
max-width: 100%;
}
I’ve tried float properties as well as justify-content options. How can I create this alignment?
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.navIcon {
display: inline-block;
flex-grow: 1;
}
.nav {
margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
}
.snip1168 a {
padding: 0.5em 0;
padding-top: 2.4em; /* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
}
.snip1168 a:before,
.snip1168 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 a:before {
top: 0;
display: block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 a:hover:before,
.snip1168 .current a:before {
opacity: 1;
width: 100%;
}
.snip1168 a:hover:after,
.snip1168 .current a:after {
max-width: 100%;
}
.mainText {
text-transform: uppercase;
font-size: 1.1rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className={styles.container}>
<main className={styles.main}>
<div className={styles.nav}>
<div className={styles.navIcon}>
<Image src={icon} height={40} width={40} />
</div>
<ul className={styles.snip1168}>
<li className={styles.current}><a href="#" data-hover="Work">Work</a></li>
<li><a href="#" data-hover="Recs">Recs</a></li>
<li><a href="#" data-hover="Say Hi">Say Hi</a></li>
</ul>
</div>
</div>
</div>
2
Answers
Quick solution is to set
Here is a full snippet
Here I add some borders just to show where things are. I removed CSS not relevant to the question and showed a rendered HTML set to better illustrate.