How to pin the navigation to the top of a website fixed nav
Hi there we are going to make our navigation fixed to the top. So we're gonna 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. Alright. First of all we need to identify our thing that we're gonna pin. Okay. 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 hit a container. That's this fella. So here the container has some styling over here already. Okay. And all we're gonna do is add to bits. The main bit is position and fixed. Super simple. Let's give it a preview and it kind of works and you're like, Wow, that didn't work at all. Okay. It needs a width as well. Okay. 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. Okay. We need width. Okay, we'll do w...
ith and we'll say 100 now it should work. Okay. And when I scroll there's not much going on okay. You need to fake the scrolling to go up and down and you're like, yeah it works. He's ignoring that. It's all slipped underneath. Okay? By putting it fixed it means it's come out of the flow and it's no longer blocking, okay. It's not blocking the rest of the guys and pushing them down. So we're gonna have to fake the gap in there. Okay. And I want you to pause the video now and just have just a short little think maybe test out a few ideas of how you might slow this. Okay. 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 persons website, it means it exists. Okay. 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 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 the boys have a think and I'll do it with you in a second. Did you pause it? Did you have a thing? Did you actually 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 is underneath, is 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 Well try both just in case. Put some padding to the top In my head. They should both work. Let's put in like let's try and 50 pixels have a look here we go. It 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 what How high was the head of container? So it had a min height of 100 plus some padding at the bottom. So let's say 1 40 should match exactly what we used to have. Okay, so those two together now, how much do we need for margin bottom? We do not need that at all anymore, do we? Always when you are kind of fixing one thing? Trying to delete the other things because later on you'll be like, oh is there a reason I put in margin bottom? Is that essential? Okay, while you're in the midst of it you're like actually I don't need that. Alright. That's how we do a fixed navigation to the top. Pretty easy. Don't forget the width onto the next video