Media Query Breakpoint Styles

[00:00:00]
>> Jen Kramer: So that's great for mobile dimensions, but what are we gonna do to bring this nav bar back? [LAUGH] Okay, cuz we really should have a nav bar here when the screen gets this big, don't you think? So now, we have to undo all of that stuff, right?

[00:00:16]
>> Jen Kramer: Everybody good with that? This is called mobile first. So we have no media query so far. This is all of the mobile behavior that we have so far in our code here. So now, what we need to do is we need to say what we're going to do when we go into our media query.

[00:00:33]
I've picked 800 pixels. By the time we get to the end of today, 800 pixels, this nav bar will not wrap on itself. That's probably the point at which, as you start to narrow the screen, when you get to the point that the nav bar starts wrapping to another line is probably the point where you would turn on the mobile display.

[00:00:50]
This is where that's gonna be, but we are a long way from that yet. [LAUGH] Okay? All right, so let's go on ahead and add these styles.
>> Jen Kramer: So we're gonna bring back some borders here. We have other borders here.
>> Jen Kramer: So then, after that, we're gonna go ahead and start adding some things here.

[00:01:16]
>> Jen Kramer: All right, so I'm around line 123 here on your code. And let's go on ahead and add this. So we have our menu hyphen toggle.
>> Jen Kramer: And our main hyphen menu, menu hyphen close.
>> Jen Kramer: And these are the
>> Jen Kramer: These are our fun, awesome icons, basically.
>> Jen Kramer: There you go, display none.

[00:01:50]
>> Jen Kramer: Of course, right? We don't want these icons to display when we're at desktop dimensions. So this will get rid of your hamburger button, get rid of the closed box, okay? Then, the actual nav bar itself, main-menu, what do we need to do here?
>> Jen Kramer: So right now, our main-menu is set to what?

[00:02:20]
>> Speaker 2: Vertical list.
>> Jen Kramer: Yeah, mashable, just plain old main-menu. See here, the position is set to fixed, okay? So in our media query, we need to turn that off.
>> Speaker 2: Is the position static?
>> Jen Kramer: Yes, position is static. Static is the default behavior. This is one of those default values for everything in your document.

[00:02:42]
Everything has position of static by default, so we're gonna reset that.
>> Jen Kramer: And we're gonna set it to display block.
>> Jen Kramer: Okay, good?
>> Jen Kramer: Then, we're gonna get to our main menu
>> Jen Kramer: UL.
>> Jen Kramer: So this is all about undoing what we did, right? Height of auto. Width of auto.

[00:03:17]
>> Jen Kramer: Background of none. So if you go through and you take a look at ul styling in the mobile, we're just basically negating everything that we just did. Overflow, hidden.
>> Jen Kramer: Text align, center.
>> Jen Kramer: So that's what that's all about.
>> Jen Kramer: Then we can display our lis horizontally.

[00:03:52]
>> Jen Kramer: I'm using inline block for that, of course you could use Flexbox. If you prefer Flexbox for displaying your nav bar, you could totally do that. But inline block's really, really simple.
>> Jen Kramer: And
>> Jen Kramer: We've got our little icon going back in here. I guess I'm kind of repeating myself.

[00:04:14]
I've already got these styles here, which are doing what I'm typing in now, okay?
>> Jen Kramer: Then we've got our off canvas style.
>> Jen Kramer: We need to undo that. So again, this is all about just turning off everything we just did. So our main menu li first child.
>> Jen Kramer: A, we'd originally had a border on that, so we need to turn that off.

[00:04:43]
>> Jen Kramer: And then, main menu A.
>> Jen Kramer: Set our color.
>> Jen Kramer: C85028, lovely shade of orange. Border bottom, none.
>> Jen Kramer: display, inline, to keep them all on the same line. And then, we'll reset our hover and focus states.
>> Jen Kramer: Background of none. Color of 7e64be, which is a lovely shade of purple.

[00:05:42]
And text-decoration, none.
>> Jen Kramer: Yeah, thanks.
>> Jen Kramer: Okay, so if we go ahead and refresh the page one more time.
>> Jen Kramer: There we go. We have a nav bar, yay!
>> Jen Kramer: We can hover over things. None of the links are coded to go anywhere, so that won't work. But you know how to take care of that.

[00:06:11]
When we get to our break point, there we go. There's our hamburger menu that comes out. All those things are just as clickable as they ever were. Which is to say they don't go anywhere. And then, we can click out of it.