How to pin the navigation to the top of a website fixed nav

Hi there, we are going to make our navigation fix to the top. So we're going to start with this where it scrolls up and disappears, and then we're going to do this, where it stays fixed, and stuff slides up underneath it. It's super easy to do, let's jump in and do it now in CSS. 

First of all we need to identify our thing that we're going to pin. So we don't want to pin just this little chunk here. We want the whole big gray box. So let's have a look at how to do it. So the big gray box is, we called Header Container, that's this fellow. So Header Container has some styling over here, already, and all we're going to do is add two bits, the main bit is position, and fixed. Super simple, let's give it a preview. 

It kind of works, and you're like, "Wow, that didn't work at all." It needs a width as well, so we just need to say-- because by default it was a width of 100%, but obviously position, does some strange things to it. Not widows, we need width. We'll do width, and we'll say 100%. Now it should work, and when I scroll, there's not much scrolling going on. You need to fake the scrolling to go up and down, and you're like, "Yeah, it works," it's ignoring me, it's all slipped underneath. 

By putting it fixed it means it's come out of the flow, and there's no longer blocking. It's not blocking the rest of the guys, and pushing them down. So we're going to have to fake the gap in there. I want you to pause the video now, and just have a, just a short little think. Maybe test out a few ideas of how you might solve this, because that's what I love most about Web Design, is that it is a big old puzzle. There's a solution for it all, if you've seen it on another web person's website, it means it exists, so we all know that it can happen, that you can have a Header at the top, and stuff that doesn't slide underneath. You've just got to kind of think and try and work out how to do it anyway. That's what I love about Web Design, it's a solvable Rubik's Cube. So have a pause, have a think, and I'll do it with you in a second. 

Did you pause it, did you have a think? Did you make it work or you just got some good guesses, let's have a little look. So the way I thought about doing it, is the container, it's underneath. It just needs to be pushed down a bit. So if I find the container and add some stuff to the top. Padding or margin? I think both will work, we'll try both just in case. Put some padding to the top. They should both work. Let's put in like, let's try 150 pixels, have a look. Here we go, worked just fine. Is that enough? Yeah. 150 pixels, great. 

So it slides up underneath, but starts off with a bit of a gap. Basically we're putting in however high that was. How high was the Header container? So it had a min height of 100, plus some padding at the bottom. So let's say 140 should match exactly what we used to have. So those two together. Now how much do we need for margin bottom? We do not need that at all anymore, do we? No. Always, when you are kind of fixing one thing, try and delete the other things, because later on you'll be like, "Oh, is there a reason I put in the margin bottom, is that essential?" While you're in the midst of that you're like, "Actually I don't need that." 

All right, that's how we do a fixed navigation to the top. Pretty easy, don't forget the width. On to the next video.