Hello everyone! I thought there was a room for the CSS Class but I don't see it?
My question is: why can't we use flexbox to separate the nav items at the top of the page? It works to separate the 2 ul's and before I saw the video on how Kevin does it, it worked to separate all the ul items with justify-content: space-around. Does anyone know why once the lists are separated into to nav lists the child elements are no longer effected by flex box???
13 Replies
context?
In Kevin's CSS Class we build a page with a navbar across the top. He splits the two sections of the navbar UL's with flexbox but uses margin to add space between the child elements. I wanted the navbar to be more responsive so I used flexbox to separate them but when I broke the UL into two sections like he does the flexbox stopped working on the children:
.nav {
display: flex;
justify-content: space-between;
}
separates the two sections of the navbar
I tried to add display flex to both the navlist and to the navitem and neither is putting space-between the elements anymore. Pretty sure it will work if I make them two individual lists instead of one list but do I need to do that??
<nav class="nav">
<ul class="navlist">
<li class="navitem"><a href="#" class="navlink">Home</a></li>
<li class="navitem"><a href="#" class="navlink">About</a></li>
<li class="navitem"><a href="#" class="navlink">Contact</a></li>
</ul>
<ul class="navlist">
<li class="navitem"><a href="#" class="navlink">Sign In</a></li> <li class="navitem"><a href="#" class="navlink nav__link--button">Sign up</a></li> </ul> </nav>
<li class="navitem"><a href="#" class="navlink">Sign In</a></li> <li class="navitem"><a href="#" class="navlink nav__link--button">Sign up</a></li> </ul> </nav>
Which course are you talking about? Cause there's channels for each one
Conquering Responsive Layouts
I've given you the role for that, there is an entire forum channel in #conquering-responsive-layout with other people's solutions
As for this question, flex only affects direct children. Once you wrap them in something, it's the wrapper that's effected
No idea how I missed that.. Thank you!!
You can however nest flex to then also distribute the children
I thought I was nesting it but both children have the same class name. Could that be the issue?
No, that shouldn't matter
Share your code in codepen, I'll take a look in bit if no one else can.
There's no display flex on
nav__list as far as I can see nowOk here is the codepen. There are multiple flex displays that are not producing any results now. I think making a new class for the second UL might be the easiest way to get them both to respond but I'd love your help. Thank you!
https://codepen.io/Matthew-Steele/pen/BaMQrKz
The nav__item has not reason to be flex since it only contains an element, to add a gap between the nav items just add a gap: 10px on nav list
gap sounds perfect I will try that shortly. thanks!