Hi everybody, today, with this lecture I'm hoping you'll sit with me and write up some code where we use media queries to produce responsive navigation. In particular we want to make one page where the navigation bar is at the top on a small screen and off to the side on larger screens. So let's look at some code. So what I have here is some HTML that doesn't have any styling on the navigation bar. So what you have is a nice horizontal line of links right up here at the top of your page. Whoops, right down there. What I would like to do is design my page, so that on small screens, the navigation bar is still on the top. But instead when I'm on larger screens, we have more room to play with. So, I want to put that navigation bar, off to the side. So, let me draw you a little picture here. Small screen, I want the bar to be along the top here and then you'd have all the content. But on a larger screen, it can be this big, well then I want my navigation bar to be along the side and we can put all the content right off to the right. So let's take a look at how we're going to do that. Because we want to do mobile first, that means by default we already have it set up where the navigation bar is where we want it, but let's go ahead and add a little bit of styling. I'm going to cheat and copy and paste this in here for just a second. What I've done, is I've just added a little bit of styling to not only the navigation, but now, we also have it so that the links themselves are also styled. So I've put in some border radius, to make them nice and circular. I've added the margin and the padding. And, just in case you look at it, and kind of wonder what's going on, I've done a little trick that I do, in order to center text inside these little [INAUDIBLE]. I've gone ahead and set the line height to 45 pixels. What this does is it gives this kind of little extra padding on the top and the bottom to help fill up the size. You should play with this, and kind of see if you like it. Well even though we have it looking great the way we want it on a small screen, let's see what happens when we make the screen larger. Well at the moment, nothing happens when we make the screen larger. And that makes sense because we didn't put in any media queries. We do have a slight bit of responsive design simply because I've used fluid measurements. That margin and that padding, it's going to adjust as I resize the screen. But I don't just want things to adjust. I want a completely new layout, so let's get started. The first thing that I'm going to do is add in my media query. @media all and (min-width) I'm just going to go ahead and set this to 900 pixels. It's a nice big size, and it'll give us a really clear break point as to where we want things to change. So, I've done that, and now I can start adding new rules. Some people love to jump right in, and start doing a whole bunch of coding. It would make sense that sense we're doing navigation bars that we would want to start adjusting the different navigation. I'm not going to do that thought. What I always recommend is somebody write a very simple, clear rule. The reason is, it's really easy for you to figure out whether or not your rules are triggering. So let's go ahead and just change the entire color of the body of this page. So put in body, curly bracket, background, color, I'll just make it blue. All right it worked. If for some reason you typed that in and it didn't change anything on your screen, You want to stop. Don't start doing new complicated things if you can't even get this little one to get going. So, I messed up. First I can't make this as slightly less obnoxious color here. See if I can get away with grey. There we go. You can still see everything. If you run into problems, the parts you want to check are go in did you remember to have minimum width? If you do maximum width, then as you make it larger, it might trigger on and off. Make sure you've added the pixels at the end so it knows what it's looking for. Make sure you have two sets of curly brackets. Notice I have one set that starts my media query. And then a second one that goes with the body selector. If that's going, let's go ahead and move on to how we would change that navigation bar to be off to the side instead of on the top. So one of the first steps we're going to want to take is changing the styling for the nav tag. I have it for you, right here, along with a little typo, I see. The most important thing is that I want this to be off to the side, now. By default, nav is block, so it takes up the entire width. Now, I only want it to take up a small bit along the side. In fact, I said that I want it to take up 20%. So, as the screen gets larger, it will still take up 20% of the screen. I also have a min-width of 125 pixels because I just don't want it to get too small. This now has placed the nav bar off to the side, but it still doesn't look quite right. What I need, is I need to style those individual links as well. So that they go right underneath each other. Let's do that next code. So how do I do that? How do I get the links to go underneath each other? Well that's not too hard if you remember some of the more advanced CSS you've learned earlier. The most important thing is that I want to make it display block, right here. Once you do that, well, now they have to go underneath each other. I played a little bit with the text decoration and the padding, but other than that, everything is just a little bit of extra styling. The important thing for the layout was to make everything display block. So let's take a look at what we have for a second. We have our navigation bar and it's off to the side as we were hoping. And it only takes up some of the space. But we really wanted the content to be next to it. We wanted it to be over here to the side. And instead, it ended up underneath. What do we need to do? If we were in class, in real life, I would sit there and stare at you, until someone finally raised their hand and made a guess. But, you're lucky, we're not there together. So I'm just going to tell you. The problem isn't with our navigation, it's actually with the section that comes underneath it. I'm going to go down here. If you think about it, every section by default is block, so it's a simple enough trick to get these things to be next to each other. I'm going to add the code right now. So in order to get this to work I've added a little bit more code. I went in and I said, you know what, this section can't be block, it needs to be inline block. And since I made the navigation bar about 20% I went ahead and made this 70% because I'm not feeling like I want to do the math of the margins and the padding right now. I also set the height to 100 viewport height to take up the whole screen. I did have to go back and change one thing up in my nav as well. I had to add a float left, right down here if you look. And this is what lets these two things be next to each other off to the side. So let's take a look at what we've got. On the big screen, we've got the vertical navigation bar. On the small screen, we jump back to the horizontal navigation bar. Neither one of these things had a lot of tricky CSS to it. But the important part was remembering to put in that media query, that's what triggers everything. So if you didn't code along with me right now, I hope you'll stop, write some code on your own and see if you can't get things to move around. Try to do it in such a way that you can see it really making sense. Where you know that on small screen phones they really do do their navigation differently than if you're on a laptop. Good luck, and make sure to post questions if you run into trouble.
