Making a Navbar Responsive

[00:00:00]
>> Okay so the last piece that I want to cover here for our navbar is making it responsive. So right now, our navbar is configured such that it looks the same across all screen dimensions, okay? And I discussed earlier that this has got maybe some issues when it goes to mobile, it would be better off maybe having a hamburger button.

[00:00:21]
I have that covered elsewhere in the Frontend Masters curriculum. We're not gonna add it here in this course. But when it gets big, we probably like this to all go in one line. And in fact, in our final portfolio website, you see how I've got my name pushed over here to the left.

[00:00:36]
I've got my navigation over here on the right. And when I make this screen smaller, then it rearranges itself at some point in time. So that is what I mean by making it responsive. We're gonna change the way this page is laid out when we get to what's called a break point.

[00:00:53]
So and we can define that as some screen width on our website. So let me show you how to set that up. So right here after all of the styles that are here in my style sheet currently. What I'm going to do is I'm going to add a media query, which is part of responsive design.

[00:01:15]
I talk a lot about responsive design in my course here at Frontend Masters, which is all about flexbox and grid. That will walk you through all of the details of responsive design and how this works. This is a really brief lesson. And the way we're gonna set this up is with what's called a media query.

[00:01:33]
And it looks like this at media and we're going to say a minimum width of 850 pixels. Why 850? Because extensive testing showed that this was the right point to put those. You can make that number, whatever you like. And we're gonna put in a couple of brackets and then inside of this, we can put in styles that will become effective only when the window is at least 850 pixels wide.

[00:02:02]
So in other words, 851, 1000 pixels, 1200 pixels and so forth. As that window gets wider, these are the styles that will apply because they're later in the document. They're gonna override anything that came before. So what I'm going to say here is I'm going to save for my nav.

[00:02:23]
I'm now going to put in a max width of 1200 pixels because let's face it we have some really big monitors these days and we could have this navbar get really out of control. We could have my name so far separated from the navbar that it would just be ridiculous.

[00:02:41]
So let's sort of limit that with that screen and we're gonna say no more than 1200 pixels wide and we'll say margin of zero auto. And as I mentioned before, margins zero auto, we'll center that very nicely on the page. We may not see a lot of change over here right now, but that'll be important as we get this set up.

[00:03:03]
Now the only other thing I need to do is to take my name and put it back on the same line as my navigation. So the way we got it off of that before, is here in the style with a nav li first child, we said, we set the flex basis to 100%.

[00:03:20]
So it took up a full width of a line. Now what I want to do is I want it to take up whatever flexbox says. So we're gonna just reset that here inside of our media query nav li first child. The flex basis will be auto, okay? So a 100% is no longer in effect that will immediately put it back down onto the same line.

[00:03:47]
And here it is centered on the page, I'm also gonna turn off that centering. Remember we text align the words in the center of that particular box. I'm gonna turn that off also, text, align left, okay? Again, you may not see much change here immediately, but it'll be important in just a moment.

[00:04:11]
Because the last thing we'll add to this as we're gonna say margin, hyphen, right, auto. And that's the magic sauce that will push the logo way over to the left and the rest of the navbar all the way over to the right. So rather than flexbox, without this, what's going on is take that out for a second.

[00:04:37]
What's happening now is the default flexbox that we already set. We said take everything center it in the middle of the line. And so the extra space right now that's associated with that line is evenly split between the left and right side outside of the logo, outside of that last navigation item.

[00:04:55]
By adding the line here. Margin-right auto, I'm taking all of that space from the outside of my navbar, and I'm putting it in between the first child and the rest of the navbar. So now because right now my code pin is over 850 pixels wide. This is the way the navbar looks as I make it smaller, see how it changes its layout.

[00:05:26]
So that is as simple as we can make responsive design right there. Just responded to a different screen size in just a couple of CSS styles.