This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to change the default styles for Bootstrap 4 nav

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_118

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi there, in this video we're going to go, from me, that looks like this, to, eee, like this. It's going to match our mock-up nicely. We're going to go through our homework, where we remove the background color as well. You ready? I'm ready. Let's do it. 

Before we get started we are going to work out what happened to the background. How do we get rid of it? How did you do it? As long as it's gone, that's all that really matters. I'm going to show you the way that I did it. Now I'm going to right click it, go to 'Inspect', and have a little look. Okay, over here. Remember, using my little kind of select element. I can click on what I think is the whole Nav, which feels like this thing. You can see there, is something here called Background Light, giving it its background color. I can turn it on and off, that's just a trick. 

Once you get used to using the Google Chrome tools, it can be really handy just to figure stuff out. And what does it say? It's not very good at telling me where it is. It's referencing the SCSS file, which is not what we are kind of using, we're just using standard CSS, but I should be able to just search for that. So BG Light, let's have a little look. So clicking in here, I can go to 'Edit', 'Find', and type in 'bg-light'. There's two occasions of it there, and there, not sure which one it is. Now you could go into the documentation, and figure out if there's like an alpha 0 version of it, which is not, or maybe create a Class, grab 'bg-light'. Copy it over here. Right out of Class, it says the alpha is 0 for BG light, but that doesn't really work either. 

The easiest way, it's quite simple, I can delete BG light off this top one. Do I need to delete the second one? Let's check it out. No. So there you go-- oh, I do, because there's a white background behind this logo here. So both BG Lights need to go; there was a BG dark. Just so I can show you. There's that primary and all sorts of other colors that you can use, but no transparent, you just get rid of it. Nice work. Now if you've got some other way of doing it, I'd love you to share in the comments, just to figure out, just to say, "Hey, I did it this other way, and it worked." Just so there's other people, if they find that way, a different way, you can kind of compare notes, plus, so I can see. You might find a better way of doing it than me. 

Now next thing I want to do is customize these buttons, right? So I want to keep some of them, like my mock-up here, says I've got a drop-down menu, let's have a little look. Zoom right in, a bit too far. So you can see, I got a drop-down menu, and just a simple button. So I'm going to to get rid of everything except for drop-down, and maybe this one here. We won't keep disabled, we'll keep the regular link, and this drop down one, maybe these two because they match colors. So let's go and find them in the code. I'm going to make this a bit bigger now. And we are going to say-- where are we? So the first one I don't want, so let's separate everything out. So that's my brand, that's my first-- this is the toggler button. This is the, like drop-down menu, when it gets to Mobile. So we don't want to get rid of him, and all the rest of this, is the navigation, so this one here, we're looking for--

So there's a list, list items, and all these 'li's are the buttons. So that is a button, Li, that is a button, that is a really big button. The Li starts there, you can see it kind of finishes, all the way down here, and that's our drop-down menu. I want to keep him, and the one just in front of it. Let's get rid of this first one. So that Li we've got, that Li we'll keep, and that Li we'll get rid of. Just showing you for instances. We just want ones that are just regular old buttons, not activated ones, or hidden or disabled ones. Hopefully now, it's still working, drop-down's kind of work. Down here it's the wrong colors. Navigation is doing weird stuff over here, we'll fix that, but kind of working okay. 

Next part. I'm going to close down my 'Search', and I want to, can you see, I noticed I've used the kind of same style, as on this one, as on this one. So I'm going to go and steal that style, and apply it to it. So I've made a Class earlier on called-- what was it called? Button Outline Light. That was the thing that we used for making it white around the outside. Let's go and find that and reuse it. So it was in the Jumbotron, It was this, a Class button here, and we added this thing. I know if I grab just this part of the style, often it doesn't work, it needs to be called Button, and the kind of style that goes around. I'm going to copy it, and let's go and have a little look. Because the button part of that Class, gives it its kind of fullness and its click-ability, and this is just the line around the outside. 

So let's grab it, let's find our drop-down button. Now where does it go? There's a ul, which is all the navigation. There's these list items, like little parts to it. And where does it go? It's either going to go on the Li or the A-tag, one or the other, I can put it in here. See how that goes there, check it out. Worked perfect. So it's that one, and let's do it to the other Li. This one here, Button Light. Nice. Got to change the text in these, they're actually the wrong way around. So I want the Li for the drop-down menu, all of that. I want it above this. I might separate them out just because it gets a little confusing. It might just be me, I need these visual gaps. 

So drop-down first, and then this other one, and the two words are Flavors and Contact. So in here we're going to change it from Drop-down - that's the word - to Flavors. Where's this one, Contact? And in the drop-down menu, these are the options for the drop-down. So we're going to put in different flavors. So there is our Ham flavor. Gross. There is our Beef flavor. You get the idea, right? Oh, that's interesting. So this divider Class, let's have a little look at the drop-down. Do we need the divider? You see this thing here, you might have like a, you can obviously see the use of the divider, right? Kind of like segregates these guys to maybe, this one here is, I don't know, other. 

So I'm going to get rid of this divider drop-down, it's cool though. And just have these, we're going to have Chicken. We're going to have one more meat, I was trying to think of one there. Chicken, what are the other meat groups? Oh, we'll do Fish. Green could be the worst one. Old fish flavor. So let's have a look at the menu. Oh, looking good. So a couple of things I want to do. I want to make the text white and put some gaps in between them. So making the text white. Weirdly, before it was just fine being white. Remember, over here, you're like, "Why didn't that go white?" It's because the navigation is trying to do lots of other things to it at the same time. So let's click on this. Actually let's click the 'Inspect Element', on the far left here. And let's hover above this, let's try and get the--

Can you see, I don't want to click on the, oh, I do, you want to click on the text on the inside, because I want to figure out what's maybe controlling him. So what is controlling him? Nothing here in the CSS, something called Nav Bar Light. I'm just looking for keywords like-- because Nav Bar Nav is probably not going to do it, Nav Bar Light seems pretty good. Cool. So let's go and try and turn off Nav Bar Light. Nav Bar, where is he? At the top. Nav Bar Light. let's try dark. And that kind of works, right? You're like, "I can live with that." And the other cool thing about Nav Bar Dark is that it changes, not enough, it's too light still, there's no Nav Bar White, which would be really helpful, just give me Nav Bar black and white, not this kind of half in between, you can see, when it goes blue it says, "I can't find this crazy Class that you're making." 

So we're going to use Nav Bar, we'll put in Dark, and we'll adjust it a little bit. So we want to adjust the text on the inside, the outside seems fine. So, is it working now? Nav Bar Dark, there it is. So we're going to make the text white, and how do we do that? We need to add, we did this earlier on, remember, we found a Text White option. Can't remember what we used it for, but let's go through and apply it. So there's my Li for the drop-down menu. Let's try sticking it in here like we did before, and let's go to text, inside of this Li is going to be white. Let's give it a go. Check it out; didn't work. 

So that exact same Class, there is sometimes, you're just like, "That doesn't make sense", and try it on a different Class, you're like, "Ah, okay," what's it on the A-tag? In this case that's exactly what it wanted. We do the same thing for this other list item, this one here. In the A-tag, I'm going to say, there is a Class applied, so it's got to be Text white. Nice. 

The next thing is probably adding Padding between these two, well, Margin between them, and maybe making them the same size. So Margin, easy enough. Let's look at our code, and let's have a look for the-- Are you getting the same as me? You're like, "Man, that's looking, the Nav Bar's so big, and because I didn't build it, becomes like, I don't know, gets them visible. So maybe this might be a really good chance to go, well, actually this, because I work it out eventually, but I'm going to add some commenting. Remember, 'Command /', or 'Ctrl /' on a PC, and let's put in 'Button'. I'm going to put in 'Button Dropdown'. And here, I'm going to put in, 'Button, This one's 'Button Normal'. Is that helpful? It's helpful for me. 

So what we want to do is, let's add, where do we add it? Maybe to this list item, let's try that, let's go 'margin right'. 'mr', and we'll do '4', let's have a look. It did not work, 'margin right 4'. Feel like it should, it did, wow, 'Refresh'. You normally don't have to refresh because they're VS code, but don't be afraid to click the Refresh button. Worked for me just then. So we've got our drop-down. You'll notice that I had this up like this, because they're things that drive me mad. I don't know why, while I'm teaching and that keeps going, very distracting. So we're kind of there, I want to make them the same width. So we're just going to force in a width, we try it on here for the Li. We'll say, you, Li, are a-- not in this Class, we're going to use a Style. And Style is going to be a width, and you're like, "Why are you doing this over here, Dan?” And I'm like, "That is totally true." I should just create a Style over here, that is a width, but I guess I want to get you used to it over here as well, because Bootstrap seems to like putting a lot of the styles in line, or actually on the actual graphic itself, It doesn't really matter. 

So this width of maybe 200 pixels, let's have a look. Maybe a bit too much. 150, that works good for me, no it's too big. Let's go 110. Ah, 120. Stuff I should organize before I start recording, right? Come on, Dan. We'll do the same thing for this button down here. Grab it all, and where's that second button? Ah look, handy comment. Here we go, 'style', now they're the same width. So it's looking good, gets down to mobile, got a drop-down menu. It's appearing on the wrong side, we'll work out that in the next video, and we'll also get our Header to be sticky. That's it for the moment, let's get on to the next video.