How to customize the website navbar in bootstrap 4

Hello you, this video we are going to take our Navigation, which currently has everything in it. Lots of stuff, we're going to cut it down to just simply like this. We're going to float the Nav to the right-hand side as well, and when it all collapses down, it's going to turn still, into a nice little Mobile menu. Let's work out how to do it now in VS Code and Bootstrap4. 

It is Nav Bar customization time. We got loads of Bootstrap skills, and we're going to use it to make this thing work. So first of all let's have a look at the documentation. I want to go to 'Utilities', I don't want to go to utilities, I want to go to 'Components', and I want to go down, close to the bottom, there's two, there's Navs and Nav Bars. Let's talk about the difference between the two. 

Nav Bars are the one you're looking for, just so you know, and Navs is like a cut-down version. It's kind of, it's a navigation, but it's not the, like top navigation. It kind of looks like it. So it's kind of a navigation but it also has, like tabbed versions for navigation. You can have drop-down kind of vertical Nav. They're not like the Header navigation, like you're talking about, or at least they're a part of it. You can see, there's a different kind of like linked tabbed navigation. 

Okay, what else? You've got little boxes, there's all sorts of things in here, that aren't what we're looking for. You might use them but they're like internal, like you get to a page, and then you drop down for categories, or kind of redefine your searches. The one you're looking for is Nav Bar. It includes parts of the Nav, but the Nav Bar is like the whole chunk. Let's have a look, we looked at it earlier, right? This is the everything one, it's got a search box, it's got a drop-down. It's got lots of different kind of ways. 

Now what you want to do is find the one that's closest to what you want. You can see here, just the brand one. It's not very exciting, just got Nav Bar. You can switch it out for an image, you can have image and text, and it kind of shows you all the things that are needed. You don't want to kind of, I guess, work out every single Class that's been applied here. You want to find one that looks closest, and work out what you need to adjust. This is kind of close to what we want, except I want the one with a drop-down. I don't want to have to like try and incorporate drop-down menu. I'm going to find one, this is like a really good starting point, right? 

We've got this thing called the Brand, which we'll look at in a little bit more detail. Then I've got a bunch of links. For some reason, by default they're floated to the left. Nobody even wants them floated to the left, but hey ho, there's this already in the code. So probably I'm going to start with this one, because we've got quite a complex one, I'd like to leave the one we've got, because I want to show you how to kind of modify it, and work out deleting the bits you want, removing the bits you don't. 

It's the same thing said twice, good work, Dan. So what have we got? We've got all of this stuff. There's the Brand. What else is in there? Let's have a look. What I want to get rid off first? Let's have a little look, and use 'Inspect', I'm going to right click this, go to 'Inspect' and hit my little arrow down here, and just kind of work around and figure out what that is. There is some sort of - make this bigger, - there is Input Class Form control it's inside something called Form Class. That looks kind of like what I want. 

What else is outside of there? Can you see, if I go higher, I get into this stuff here, that I want, this thing called Navbar Nav, where this Form thing seems to wrap up. It's hard to point it over here, and also point it over here. You get what I mean, right? So I'm hoping, if I can tell you everything in this Form Class, I might get rid of that big chunk. So let's go and look in VS Code. Let's find my Form, where are you, Form? There he is there, and kind of wraps it up. 

I can kind of toggle it on and off to see where it closes, and when it's toggled you can actually grab it all, and delete it. You can see, the numbers go from 48, and it skips a few, to 51, because I've got some stuff selected in there. It's a nice way of deleting like big chunks in one go. Same with like a Nav, we can grab this Nav here, and toggle it down if we need to delete it, or at least just minimize the Jumbotron. Just so everything's like, maybe a little bit easier to work with. I'm going to unpick that, let's check it, see how we did. Awesome, he's gone. It's cool, and we haven't broken up, let's check. Seems to still trigger. That's a big thing with working with a Nav, is like, try and fix it, or, you know, try and amend it, but always try and check it, see if this still works, because you can end up breaking it pretty easily. 

Next thing we want to do is I want this to go to the right, which is surprisingly tough. Let's have a little look here. So I'm going to grab my 'Inspect' button here. I'm going to kind of hover, I'm trying to find where it kind of, because, you see, I don't want just this Dan thing, I want the entire bit, and that looks like it. It's called the Navbar Collapse, is that what I want? Kind of moving my mouse around, seems to be it, right? Navbar Collapse, and inside of that it seems to be, yeah, that seems to work. So it seems-- let's go check that out. Navbar Collapse, there it is there. It kind of runs to, where does it go to? All the way down to, line 48, so all of that stuff, what do I want to do? Let's have a little look at it. 

Margin-right:auto, it seems like an easy fix. Too easy, no way. No, didn't work. Oh, did it? It did, look at that. So my first inkling would be to, like not look for those, because I'm kind of, I don't use Bootstrap for every Build. So I'm like, okay, so I'm going to go find, I might be looking to add, don't know, Text, remember we looked at this, Text Right, and I know that doesn't work, because I tried that already, when I was kind of prepping for this course. 

I could start using Flexbox. Remember we used Flex End, and I played with that first, and I was just, stumble across, I was like, "Hmm, how about you, you look good." So have a little look at what's in there first before we start kind of trying to rearrange things. Good old Bootstrap have made this super easy. I got to get out of the habit of trying to like force it to do stuff with my custom CSS. 

All right, so that's it for this video. We went through, picked Navigation, at least a Navbar, that works for us. The Navbar includes Nav parts, little Nav chunks inside of it, but in your documentation, if you're looking in here and going, "This seems really confusing," because there's lots to it, watch. Lots of stuff. It can-- you kind of read through it, of course you should, but I guess we're kind of using Bootstrap to skip, trying to read and do a lot of this ourselves. So throw one in that is close, and do some adjustments. 

We'll look at color themes and a few other bits in a bit, but yeah, Navigations, not terribly hard, and actually super easy when you consider how long it took us, to make that little Mobile Nav up here. Look at that drop down, this works, and it's got a nice little box around it, and there's a drop-down inside of here. Thank you, Bootstrap. 

Oh, one more thing before we go. Make sure you change it back to Margin Right. I left it as Margin-- oh, Margin Left, even. So it's Auto Left, so it's pushing it all the way, that way. All the way over to the right, so ML is what we need in this case. All right, next video.