How to add a sticky fixed bootstrap 4 navigation to your website design

Hi there, in this video we're going to get our Navigation to be sticky. So when we scroll it still stays at the top, and also we'll fix our little problem where we're on mobile, and it's over on this left-hand side here. We're going to move it so it lines up nicely on the right. 

Remember, earlier in the course we went and fixed our Header to the top. We made a Class that said, Position Fixed on the Nav, and that will work, but there are some fancy stuff that Bootstrap have got. Finding it is always the fun part, you're like, "All right, so where's your fixed Heading?" Position Fixed looks good. This one here, Navbar fixed, look at that, let's click on this one. You end up at this Examples page, and you're like, "Ah, it's not quite what I wanted."

Go back to 'Documentation', let's look up 'Fixed' again. And this is the, I don't know, I guess I want to make sure, that when you are doing yourself, you're like, "Am I doing this right? You're like, "Yep." Is just working out what Bootstrap have done. Fixed Top, you're like, "Perfect." Just add that to the Div. Which Div? Probably the first one, this kind of wraps everything up. My Navigation, let's add it here. Paste it, you're like, "Bingo, job done." Kind of works, it's fixed to the top, but it's broken my navigation. 

So probably Bootstrap, being great. They've got something else. Sticky is the word, so let's have a look.. So Sticky Position, Sticky Top, it's actually just underneath where we were. There's Fixed Top, and just a little bit below is Sticky Top. So here we go, 'Copy', and let's try Sticky Top instead of Fixed Top. Let's give that a whirl. Ah, there we go. You decide whether you like our Fixed Top, especially because it's see-through, and kind of covering things, up to you, but that is how you fix a Top Navigation in Bootstrap4. 

The last thing I want to do before we go is, this has been annoying me. There's this drop-down, and it appears all the way over here on the left, and you're like, "Why is that, have I broken it?" I was looking at it, I was like, "Did I break that?" Then I had to look back at our old, when we just got it first installed, and got it started. Let's inspect this one. Actually, it's a default from Bootstrap. So this is how it came out of the box. You can see, it just kind of pushes it over here, with some background color, which we removed. 

So that's the default. How to fix it? I spent a good chunk trying to fix that. I tried to work out, I tried to use Margin, because we did Margin Left, remember, we overrode that to make it go all the way this side, but turns out it only works for, remember, we did it here, we said, on the UL, where are you, UL? Drop-down menu, we said it was on Margin, was on right, and means that it looked like this. 

Remember, it was kind of jammed up against this side. So we just did that, and you'd assume it would have fixed the buttons as well, but nope, they still appear, when it's down on Mobile, all the way over here. I tried a couple of things, I tried Text Left, I tried applying the ML Auto to a couple of different items in here. Still couldn't work it out, eventually I found this. 

So there is an option to float items, we looked at, Float is kind of like an old, not old-school, but a different way of aligning left and right. So I'm going to do 'Float', and I'm going to have a look under, where is it? It's under 'Utilities', under 'Float'. So you can kind of see, Float Left, Float Right, Float None. And it kind of moves them left or right. You can do it for different Media Queries. So I want it to float to the right, please. Let's give this a go, and let's put it in our code. 

Where does it go? Very good point. Let's have a little look at inspecting inside of Chrome. So let's pop this down, let's use this little option to inspect the element, and we're looking for, like the Container. We don't want the actual buttons themselves. We're kind of just moving our mouse around, till we find something that feels like the Container. I'm going to click on it, then down here I'm just going to stick it to this and see what goes. 

So the same UL, so where is it? The UL Class. We're going to add this as well, and see how that goes. Drop-down, hey, nice. It's been pushed down a bit too far, my Logo's too big. I need to make that smaller, so this Nav has got this big gap between here, but that's something I can let you fix. Make the Logo smaller. All right, Drop-downs work, everything works. It's lovely. All right, on to the next video.