Lessons

Lesson Info

Change the Default Nav Styles

Hi there in this video, we're going to go from menu that looks like this to like this, it's gonna match our mock up nicely. We're gonna go through our homework when we remove the background color as well. Are you ready? I'm ready. Let's do it. Alright, 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? Okay. As long as it's gone, that's all that really matters. I'm going to show you the way that I did it. Okay? So now I'm going to right click it, go to inspect and have a little look okay over here. Okay, remember using my little kind of select element. Okay. I can click on what I think is the whole nav which feels like this thing. Okay. And you can see there is something here called background light. Okay. Giving it its background color. Okay. And I can turn it on and off. That's just a trick. Okay, Once you get used to using the google chrome tools that 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 S. C. S. S. File. Okay. Which is not what we're kind of using, we're just using standard CSS but I should be able to just search for that. Okay, so be the light. Let's have a little look. So clicking in here. I can go to edit, find, find and tripe in B. G light. Okay. And there's two occasions of it there and they're not sure which one it is. Now you could go into the documentation and figure out if there's like an alpha zero version of it. Okay. Which is not okay. Or maybe create a class, grab BG light, copy it over here right out of class. It says the alpha is zero for be G light but that doesn't really work either. Okay, the easiest way, it's quite simple getting into Elite BG light off this top one. Do I need to delete the second one? Let's check it out. Okay. Okay, so there you go. Oh I do because there's a white background behind this logo here. Okay, so both B G lights need to go, There is a B G dark just so you can show you there's a primary and all sorts of other colors that you can use but no transparent. Just get rid of it. Nice work. Now if you've got some other way of doing it, I love you to share in the comments just to figure out this is so like, hey, I did it this other way and it worked just so there's other people if they find that way. Okay, different way. You can kind of compare notes plus. So I can see you might find a better way than doing it than me. Now. The 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 got a drop down menu. Okay let's have a little look zoom right in too far. Okay so you can see I've got a drop down menu and just a simple button. So I'm going to get rid of everything except for drop down and maybe this one here we won't keep disabled will 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. Okay, I'm going to make this a bit bigger now and we are going to say where are we? The first one I don't want so let's separate everything else. So that's my brand. That's my first this is the toggle button. Okay this is the like dropdown menu. Okay. When it gets to mobile so we don't wanna 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. Okay. And all these allies are the buttons. Okay So that is a button, Ally, that is a button. That is a really big button. Okay. The Ally starts there and you can see it kind of finishes all the way down here and that's a drop down menu. You want to keep him and the one just in front of it. Let's get rid of this first one so that Ally we've got that I'll I will keep and that Ally will get rid of it is just showing you for instances and we just want the ones that are just regular old buttons not activated ones or hidden or disabled ones. Hopefully now it's still working. Dropdowns kind of work down here. It's the wrong colors, navigation is doing weird stuff over here. Okay, we'll fix that but it's kind of working. Okay. Alright, next part, I'm going to close down my search and I want to have seen, I've noticed I've used the kind of same style as on this one as on this one. Okay, so I'm going to go and steal that style and apply it to it. Okay. So I've made a class earlier on called, what was it called? Button outline light. Okay. That was the thing that we used for the making it wider on the outside. Let's go and find it and reuse it. So it was in the jumbotron, it was this a class button here and we added this thing. Okay. I know if I grab just this part of the style. Okay. Often it doesn't work. It needs to be called button and the kind of style that goes around case I'm gonna copy it and let's go and have a little look because the button part of that class gives it, it's kind of fullness and it's 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? Okay there's A U. L. Which is all the navigation, there's these list items. Okay like little parts to it and where does it go? It's either going to go on the ally or the a tag one or the other and put it in here and see how it goes there. Check it out. Worked. Perfect. Okay so it's that one and let's do it to the other Ally this one here but in light nice. I got to change the text in these and they're actually the wrong way around. So I want the Ally for the dropdown menu all of that. I want it above this and I might separate them out just because it gets a little confusing. It might just be me. I need these visual gaps. Cool, so drop down first and then this other one and the two words are flavors and contact. Okay so in here we're going to change it from drop down. That's the word cave two flavors. Okay and where is this one? Contact And in the drop down menu. Okay, these are the options for the drop down. So we're gonna help put in different flavors. So there is a ham flavor, gross, there is a beef flavor, you get the idea right, That's interesting. So this divider class let's have a little look at the drop down. Do we need the divider? Okay 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. Okay so I'm going to get rid of this divider. Drop down. It's cool though. Okay and just have these, we're going to have chicken. Alright we're gonna have one more meat. I was trying to think of one their chicken. What are the other meat groups? Oh we do fish I think could be the worst one. Old fish flavor. Alright so let's have a look at the menu. Oh looking good. Okay so a couple of things I want to do is I want to make the text white and put some gaps in between them. Okay so making the text white um weirdly before it was just fine being white. Remember over here you're like well 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 you don't wanna click on the I do want to click on the text on the inside, okay because I want to figure out what's maybe controlling him. Okay so what is controlling him? Nothing here in the C. S. S. Something called knave bar light. I'm just looking for like keywords like because everybody now is probably not going to do it and everybody light seems pretty good. Cool. So let's go and try and turn off now by light nerf bar. Where is he at the top man? Never by light. Let's try it dark and that kind of works right? And you're like I can live with that. And the other cool thing about never bar dark is that it changes not enough right? It's too light still. There's no never white which is would be really helpful. Just give me never black and white. Okay. 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. Okay, so we're going to use Never bar. We'll put in dark and we'll adjust that a little bit so we want to adjust the text on the inside. The outside seems fine. Okay, so is it working now? Bad duck? There? It is. Okay, so we're gonna 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? I can't remember what we used it for but let's go through and apply it. So there's my Ally 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 Ally is going to be white. Let's give it a go check it out. It didn't work. So that exact same class there is. Sometimes you just like that doesn't make sense. You're trying a different class. You're like okay, what's it on the tag in this case? That's exactly what it wanted to do. The same thing for this other list item. Okay, this one here and the tag, I'm going to say there's a class applied so it's going to text white. Nice. The next thing is probably adding some padding between these two and or margin between them and maybe making them the same size. Okay, so margin easy enough to look at our code and let's have a look for the are you getting the same as me? Like man that's looking then everybody's so big because I didn't build it comes like gets invisible. So maybe this might be a really good chance to go actually this because I work it out eventually. Right? But I'm going to add some commenting, remember, command forward slash or control forward slash on a pc. Okay and let's put in a button, I'm gonna put in button, drop down, drop down. And here I'm going to put in button this one's button normal. Is that helpful? Oh it's helpful for me. Okay, 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. Emma And we'll do four. Let's have a look. It did not work margin right? For feel like I should did wow refresh. Okay. Normally don't have to refresh because that V is code, but don't be afraid to click the refresh button. Work for me just then. Alright, so we've got our drop down. You'll notice that I had this up like this because that thing is there is driving me mad. I don't know why what I'm teaching and that keeps going very distracting. Alright, so climbed there. I want to make them the same width. Okay, so we're just going to force in a width. We'll try it on here for the L I will say you Ally are not in this class. Okay, we're going to use a style. Okay. And style is going to be a width and you're like, why are you doing this over here dan? And you're like, that is totally true. I should just create a style over here. That is the 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. And so there's width of maybe 200 pixels. Let's have a look. Maybe a bit too much 1 15. That works good for me. It's still too big. Let's go 1 10. 120 stuff. I should organize before I start recording. Right, come on Dan. All right, we'll do the same thing for this button down here, grab it all. And where is our second button? Ah Look handy comment. Here we go style. Now they're the same width. Alright, so it's looking good. Gets down to mobile. Okay? You 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 headache to be sticky. But that's it for the moment. Let's get on to the next video.