Navigation Exercise & Solution

[00:00:00]
>> We have got our small things done, we got those cool double border corners, and now we are going to take care of our navigation before we sorta get to the main course of our track list and those diamond images. So where we're going to start this one is with our nav tweaks, and we are at 5C, our navigation.

[00:00:22]
You can see here, this is the kind of thing that we're looking for, for the way this page is laid out. So when we're very small on mobile, I sort of mentioned this earlier, we're trending in this direction, we were going to have just the lime and the hamburger button.

[00:00:40]
When we got to a slightly larger screen size, we were actually gonna have the word Magenta Lime up here, still with the hamburger button. And then when we got to our larger navigation, we would have everything that was visible here, okay? So that's what you're gonna see on desktop.

[00:00:58]
So, we know we already have a working hamburger button, we already put that in place. To your starting codepen, I've added, there's a couple of extra links here that I've added on, so now we also have Music and Signup. What that means is when we get to this break point, yeah, that's probably not the effect that we're looking for, right?

[00:01:22]
We don't want to have this sort of wrap underneath like this and we have to scroll in for a while before we get to our lime and our hamburger button. So we're gonna need to tweak what in order to make this work a little bit better?
>> Max-width?

[00:01:41]
>> Yeah, we got some media queries we're gonna have to think about. You need to go back and revisit our media queries and figure out. So here, we'd wanna see the hamburger button still, right, but the whole Magenta Lime logo. And when we got to here, then we'd see everything, right?

[00:02:01]
So we need to think about where those breakpoints are. We have a layer here called nav, that's all the code that we worked with before and the break points and all the rest of that. So this should be relatively straightforward for you to figure out. Don't break the JavaScript, okay?

[00:02:20]
The JavaScript is down here, there's nothing you need to do with it, but it does need to continue to run, right? All right, so how did you do with that challenge? Did you get the nav bar to behave, yeah? So what did you do? Tell me, Andrew, what did you do?

[00:02:39]
>> I added a media query-
>> Okay.
>> First for 700 max-width.
>> So for 700 max-width, okay? So did you just take this one and change it or did you, you added one?
>> Yeah, I guess I didn't realize I did that, but yeah, I just changed that one to 700-

[00:03:01]
>> Okay, just change this one to 700px max-width. And why did you do that?
>> So that the band name would show up at tablet width but not mobile.
>> Okay, yeah, so we want this hamburger button to show up for a longer period of time, right? And everything that's here inside of this media query has to do with that hamburger button, yeah?

[00:03:29]
Pretty much, pretty much that's what's going on there with that media query, cuz remember, we have a desktop first media query here. Okay, so, all right, so what we wanna do is outside of some period, right? So probably a little bit more mobile focused, maybe around 500 pixels, we don't want the name to show, but we want the name to show here for at least a little while, right?

[00:03:57]
So how do we deal with that?
>> Move that bandname, display: none.
>> Uh-huh.
>> And do a new media query of like 500?
>> We could do that? We could put display: none, we could put that in a different media query. So let's just take that out of there and we could say @media and then (min-width:500px), yeah?

[00:04:32]
Sorry, max-width, (max-width: 500px) .bandname {display: none}, right? So when the screen gets small enough, the band name goes away, make sense? Okay, when the screen gets a little bit bigger, the band name appears until we get to 700px. Okay, so at 700px, we're not quite wide enough yet to put these things side by side.

[00:05:00]
So if we change this to something more like 799px, then when we get to that breakpoint, then they are in fact completely open. So now we can go back again. So here we are, there's all our navigation. There it is with just the hamburger button. There it is with just the icon, makes sense?

[00:05:26]
>> Why is it 799, is that the magic number, or it's just so that it fits into this content?
>> It just happened to fit that way.
>> It's such an odd number to me [LAUGH].
>> Yeah, well, so no more than 799 because we have a lot of media queries that start with a minimum width of 800.

[00:05:45]
>> Okay.
>> So this stops at 799 and those start at 800.
>> Okay.
>> Yeah, makes sense? Yeah, okay, sweet. So, then the band name comes back and displays, all is well. All right, so everybody okay? Fantastic, then we're moving on.