All right, we are going to make a Responsive Menu. It's not going to be the Burger drop-down menu. We'll do that in the next video. We're going to look at, like a nice, easy, simple simplistic CSS. No extra skills, based on what we've learnt so far. Just kind of reshuffling of things, because at the moment, does this, goes down, and you go, "Yeah, cool", and it gets to here and goes, "Ah, all so bad." So we're going to change it in this video so that it changes format from this, when it gets down to a certain level, boom. Looks good on mobile, we've kind of changed it, so it's not fixed to the top, the buttons are easy to click. It's just a simple reshuffling of CSS based on a Media Query. Let's jump in now and work out how to do it. 

So our menu, you've seen, we're doing it because of this. Gets down to kind of a tablet size, or mobile size, and just falls apart. Cool. So we need to decide when this falls apart. So let's preview it on an iPad and then on a phone. So we're going to right click it, go to 'Inspect'. We're going to turn on, down here, our little Device Preview. At the top we're going to look at iPad, and on an iPad, it's looking at 50%, let's go to 100. It's actually fine on an iPad. I might push that logo over a little bit, but it's totally usable. So let's have a look at my iPhone 10. 

It's totally not usable, it's all collapsing and falling to pieces. So that's what we'll target, our mobile phone. So that is about 375. Let's have a look at our Media Query, where is he? So our tablet Media Query, so it's going to be this one, right? Our mobile view. So we're going to be working inside of these curly braces. So just after our little Hide Mobile, we're going to start chipping away at it. The first thing we're going to do is we need to override-- earlier on we said Display Flex, so our Container, no, not a Container, our Header, no, not that one. This one here, we said, our Header, which has our logo, and our navigation in it, I want to display Flex, and that made it line up next to each other. 

What we might do for this video is, I'm not going to be touching the HTML, so I'm going to shut it down. I'm just going to drag this in, and I move this across. The luxury of working on mobile means we can just see it over here. I'll move it to a 100%. I might make it closer for you so we can-- so the Editor doesn't have to zoom out too far. Let's try that. 

So first thing we want to do is, we don't want it side by side. There's lots of things to do, it doesn't have to be this first one but, so this fella, Header is displaying Flex, let's override that down in my mobile. So down here I'm going to say, Header, no, it's not a Class, it's a predefined HTML tag. So Header is going to display, instead of Flex we're going to go back to good old Block. So they stack on top of each other. So the Logo is there, now the Nav's underneath. Now these little Nav guys aren't displaying Block either. Even though the Header said, Nav items, see these little A-tags that were used, they seem to be doing their own thing, so we'll say-- what do we want? 

So the A-tags that are inside the Nav, can you display Block too? Display Block. Now they're all on top of each other; perfect. This first one, we'll make that all centered. So I could do it for the Nav and the Header, but we might as well do it for every thing, or the Logo, so we do it for the Header, because that will do both the Logo text, and hopefully all the text inside of the buttons. So let's go Text, Text Align. 

Text Align, and we'll chunk it to the center. They all go; nice. The logo, so we'll say, dot logo , '.logo', remember it's not a predefined HTML tag, even though it feels like it should be. We're going to give it some, say a min height, min height of 50 pixels. We want a little bit of Padding at the top as well. Actually we could do Padding top and bottom rather than a minimum height. Let's do that. So we'll do Padding, and we will do top and bottom, we're going to do 40 pixels. Left and right is going to be 0, you don't actually have to put px. You just put in 0. 0 is whatever measurement you're going to be using, semicolon, ';' So 40, top and bottom, and 0, left and right. That's giving us some space. 

The only real other thing is that this needs to shift over a bit. There's some weird margin on these guys. I figured it would be margin on these fellas. So margin, yeah, margin, what is it, left? So margin left, I'll set it to 0. Didn't work, I was like, "Hmm." So I tried, because I had a look at the HTML, where is it, there. Both, it's a Nav-- it's an A-tag inside of a Nav, but we've also got this Class applied. So that's what I'll try next. Instead of being on that one I'll say, in our Class called Nav button, Nav Button. We'll try it, the same thing here, we'll say, margin left, it's 0, does it work? Does not work. Have I called it the right thing? Button Nav, it's called My Button; come on, Dan. My Button. And that stretched it out. And that, my friends, is a nice simple way of redefining it just for mobile. It's not a Burger menu, we'll do that in the next video, but it is pretty easy to implement, let's have a look.

 iPad, I'm typing away, I can click on all these things, make this 100%. I can tap on them, but when I get down to my phone, it just switches out the layout, still looks good. Oh, one thing that doesn't look good, it's kind of hiding lots of chunks, we need to push that down, or in this case I probably want to turn the Fix Menu off, because it's occupying such a huge amount of the real estate on my phone. So let's have a look at doing that. What controls it at the top here? So it was called Position Fix, there it is there. So my main Container had position fixed. Down here, on my Header container, do I have a Header container? I don't. So we'll do this one, Header container, I don't want to reiterate all of that. I want to get rid of that. 

Instead of Position Fixed, we're going to make them Relative. Relative means, I'm relative to all the other people on the page. So I'm aware of what they're doing, and at the moment, can you see this big gap? This is coming from earlier on, we said, remember, we said, Container, put a huge big Padding at the top. So now I need to say, Container, padding at the top please, go away. So down here, not putting any sort of real order, just kind of trying to put some sort of hierarchy in it. So we'll do Padding Top. I think it probably can be 0, let's set it to 0. Let's have a look. 

Probably a little-- oh, yeah. So it scrolls up, which is cool, but I want a little bit of Padding, maybe just 40 pixels, to kind of match the gap underneath. And that is a real simple, let's have a look, in responsive, mobile. Oh, there's a bit of a weird gap going on here. So what I might have to do, is actually implement this all a lot earlier than I thought. So iPad, but there's no man's land of probably horizontal phone. So let's fix that. 

All I need to do is say, I want you to come in earlier, and this is the things that we've made. I'm going to say, come off. You're actually better before the closing curly braces of this one. Probably going to be better doing it there. So, comes down, comes down, poof, and it gets into a nice big giant button, and then, looks fine, right up into teeny tiny land. Awesome. Nice, simple, CSS only. Changing the layout of the CSS, but that's not what you came here for. You want to do the little Burger menu, where you click on it, and does a little cool drop-down thing on a mobile phone. Remember you don't have to have that, but it is pretty cool. To do that we're going to learn a little bit of jQuery, and we'll do it in the next video.