Responsive Navbar on Desktop

[00:00:00]
>> So, the next thing I want you to try doing Is this, when you are on a desktop-based system, what you wanna do is put the logo in the middle and shove your navigation two items to the right and two items to the left. Can anyone think of a way of how that magic might work?

[00:00:26]
Yeah.
>> Justify center instead of start, I'm sorry.
>> It's okay.
>> You had it actually at the beginning, the wrap. The wrap started at the center instead of at the end.
>> Yeah, so we're gonna need to center things, right?
>> [INAUDIBLE] Online change our order.
>> Yeah, we're gonna have to change our order, right, the Flexbox order property, and move our logo from the very first item to later.

[00:00:55]
What else can we do here? How are we gonna get the big space in between the edges of my logo and the words.
>> Auto.
>> Auto margin.
>> Auto margin, yeah, cool, so you guys ready to write it? Let's do it. Okay, so the way we're gonna set this one up is up here on our nav-ul, instead of justify-content flex-start, let me make this big enough.

[00:01:34]
I'm gonna change this to space-between, and that is going to, it won't actually look like any change yet, [LAUGH] because I've still got this margin right on the first child. But we need to reorder this first child, so we can say order: 2;, okay? So our first 4 items have no ordering at all, they have order of 0, so they come first.

[00:02:06]
My logo has an order 2, so it's gonna come second, okay? Then I can say, for my li:nth-child(4), li:nth-child(5), we can say order 2. So in other words, the same order, and what'll happen is, courses in learn still have an order of zero. Creative Space is an order of 2, Workshops Enjoy Now have an order of 2, because creative space comes first in the list items, it shows up before Workshops and Join Now.

[00:02:48]
Makes sense? Okay, and so now as I make this bigger, I have margin auto, hey, cool look that. I have margin auto over here on the right side of the logo, but I don't have it on the left. So if I go to my li:first-child and I add to this a margin, Usually I can just say margin, yeah.

[00:03:16]
Margin: 0 auto; cuz I want auto on both the left and the right. Now we can get that logo in the middle and the other navigation items can shift out to the sides. Cool?
>> Sorry, this is all outside of the media query?
>> This is outside the media query, cuz this is the desktop display, correct.

[00:03:45]
Okay. Now, if you like this layout, you can keep it, that's pretty awesome. But if we wanna override this, how would we override this?
>> Change the order in the media query.
>> Yeah, we need to change some order numbers here in the media query, so we would say li:nth-child(2), li:nth-child(3) { order: 2;, now everybody's at the same And so it's effectively it's just like everybody was zero before, now everybody is two and we're back to the layout that we had here for a tablet before.

[00:04:33]
So we've gone from this with the logo in the middle to the logo still in the middle, but now the navigation is underneath. How cool is that?