Media Queries for Responsive Navbar

[00:00:00]
>> To make this work, I'll fold up my base here, fold up my intro, fold up my contact. We're in the nav portion of the code here, and what we're going to do is add some media queries to this. What do media queries do? Anybody know what a media query is and what it does?

[00:00:20]
Well, what's a query? Query is a question, right? So we're questioning our media. [LAUGH] And the media in this particular case is gonna be the width of the screen. So we're gonna ask a question, is the width of this screen no more than some number? And we determine that number by moving the little bar around until we find some number that works.

[00:00:48]
In this case, I am going to say @media and then I'm going to give it a test. So, hey, this is a media query browser, and what I want you to find out is, if we are at a max-width: 830px. And then we're gonna put in some curly brackets and our styles will go inside of this as the media query.

[00:01:14]
Now let me just ask you, if my screen is 750px wide, will these styles apply whatever I put inside the media query? How many people say yes, absolutely, those styles will apply. If the width of my screen is 750px, will the media query here with a max-width: 830px, any styles that I put in there, will they apply?

[00:01:40]
Absolutely yes? Absolutely no? No idea? [LAUGH] Okay, the answer is yes, styles in there will apply up until 830px. As the screen gets bigger than that, these styles will no longer apply, okay? Now, you probably were used to working in the opposite way with minimum width media queries, right?

[00:02:05]
That is the other way that you can work, in which case, we're working from a mobile device and making something bigger. In this case, we're making something big and we're making it go smaller. In the case of working with navigation in particular and in case of working with beginners, I find that designing the desktop first and then making things smaller, tends to work better mentally [LAUGH].

[00:02:27]
We just follow it better for whatever reason. The code is actually easier to write as well for navigation bars. So that's why I'm taking this approach. Okay, so first of all here, inside of our media query with a max-width of 830px, we're gonna tell our header to change its alignment.

[00:02:48]
So right now, our header is set to put a space between. So it's gonna say, put the name over here on the left and put the nav bar over here on the right. I'm gonna change that to justify-content: center. And nothing is gonna change on my screen cuz I'm not at 830.

[00:03:09]
So get it to 830, Let me see, am I there? I'm actually there right now, it's not wrapping, when it does wrap, which is a little bit smaller, it will in fact be centered on the screen. But patience, we're gonna make it work just right now. So for my header h1, what we're gonna do is we're going to say, let me give you all the properties and then I'll explain them, flex-basis: 100%; text-align: center; and margin-bottom: 2rem;.

[00:03:55]
Okay, so what just happened here? [LAUGH] So flex-basis: 100%, you are familiar with the concept of width, I know you are. If I said the width was 100%, it would be 100% of the containing element. Here we have a thing called flex-basis. When you work with flexbox, there are no widths.

[00:04:18]
And the reason why is, even if I said the width was, let's say, 25%, 25% is actually an absolute number. It would never be 24.9%, it'll never be 25.1%, it will always be 25%. The flex in flexbox means that 25% is a kind of dimension. [LAUGH] Sometimes it might be 25%, sometimes it might be more than that, sometimes it might be less than that.

[00:04:45]
That is the flex in flexbox. And the way we make that magic happen is through the flex-basis property. So here, because we're working with flexbox, I've set this to 100%. And what that means is that that box that has the name in it is going to take up a 100% of the screen width there.

[00:05:04]
See that? So it's up there on the top and it's taking up a 100%. And if I put a border on it, because some of you look puzzled, 2px solid red, You can see, there it is, taking up the full width of everything, yeah? Okay, because it's taking up the full width of everything, what happens to the navbar?

[00:05:28]
The navbar doesn't have room, so it wraps onto the next line automatically for you. Make sense? Awesome, so that's all we have to do. Now this is working for smaller screens, probably somewhere around the tablet dimension. Very, very cool, any questions? So we've gone from throwing our logo on the left and our navbar on the right to making them stack on top of each other and look pretty, okay?

[00:06:04]
And that works really well until we get smaller, right? Now we start to approach phone screen dimensions and you could live with that maybe. But you're probably thinking it should be a hamburger button, right, that's the button with the three stripes on it. So now comes this part.

[00:06:22]
And this is probably a little bit more difficult, probably one of the more difficult things that we do today. But I will talk you through all of this code, and remember, there is an end-state to this code pen so you can see the hamburger button working. Okay, so what we're gonna do with a hamburger button?

[00:06:41]
The first thing we need to do is, make a change to our code in the HTML. So right now we have an h1, we have a nav. We're going to add this item right here, which I currently have commented out. So we're going to add this button here, okay?

[00:07:02]
And you'll notice that this is a button with a type of button, [LAUGH] which seems rather repetitive, but this just means that this is an actual functioning button. Tabindex ="-1" has to do with usability, it will be skipped over under most circumstances. And guess what hidden does? It's hidden [LAUGH].

[00:07:24]
Okay, awesome. So we're gonna add this. This will ultimately become, basically, our hamburger button. Now we can set all of this up and style it once we have that in place. So this is where you need to watch your little curly brackets here, okay? We wanna still be within the layer of nav, but we want to be not inside our last media query.

[00:07:51]
So you may wanna fold up your media query here and we're going to add @media, And this is gonna be a max-width: 640px. Why? Because when I tested it, that seemed to be a good dimension. All right, so I have my screen in about 525px right now. So these styles would be applying.

[00:08:18]
All right so header, we're gonna go back to aligning these as justify-content: space-between. And the reason why is, ultimately, when this becomes a hamburger button, we wanna have the name on the left and we wanna have the hamburger button on the right. So space-between is a good way to set that up.

[00:08:40]
I need to turn off the, my h1 right now is taking up 100% of that space, I need to turn that off, so header h1 That is going to go to flex-basis: auto; And we'll just see that as going over to the left hand side right now, the navbar is not able to wrap up next to it, but if we had it programmed as such, it could.

[00:09:13]
Okay, then header button. This is now, perhaps, one of the confusing moments. This is the HTML button as opposed to our class of button. We had a class of button on a link because that button, button, when we clicked on it, we went somewhere. That is the definition of a link, when you click on it, you go somewhere.

[00:09:36]
HTML buttons, not the class, but the HTML button, lots of different things can happen when you click those buttons. Often, they're triggered by JavaScript. In this particular case, we're gonna trigger it by CSS, but it's not taking us anywhere. In this case, it's gonna show us our navigation, ultimately.

[00:09:52]
So notice that there's no period in front of that header button. Display: block; font-size: 3rem; line-height; 1; border: 0; background-color: transparent; and the color: var(--white). And if you see it at all, I think it sort of flashed around a little bit there, it kind of looked like a dash for a while and kind of a fat dash and a skinny dash.

[00:10:38]
And now it's completely disappeared. If that happened, that's awesome, that's exactly what we're looking for, okay? So this is a bunch of styling that we just need to add here in place. We can also add a hover state to this, header button: hover; color: var(--green). And then comes the magic part, which is header button, two colons, not one, two colons after.

[00:11:17]
And so this is a pseudo element. So we're saying, after the button, we are going to put in this. And it's gonna look really weird, content: "\2630". And I think it's unicode code or something similar, but it's one of those kind of encoding things that gives us the three stripes.

[00:11:43]
So now it shows up, Okay? So all of this is needed so that when we roll over the button, we have a white button, when we roll over it, it turns green. All of that stuff is needed for that. And we want it big so that's where our font-size of 3rem is and we want it with minimal line-height.