Hey, my name is Dan. In this video we're gonna look at the code navigator. Now what we've done in the previous video is we've added, uh, bootstrap navigation to the top. We've done some basic customizing. We've gone and changed the links. We've changed, added an image.
Now we wanna change the colors to match our design. So I need to find out what styling, which CSS styling is giving it this gray background and this like little drop shadow here. And I'm gonna go and replace it or override it with my own styles. So to do it, I need to figure out what is controlling it. Now you'll see in code view here there is a bunch of, um, code that goes into this navigation and there is a even more styling that goes to make it happen. So to figure out what does what, um, we're gonna learn something called the code navigator.
The code navigator's pretty easy. I'm gonna select this navigator. Uh, the nav bar at the top here. I'm gonna right click. So my main, um, so right click on a Mac, you might have to control click, um, 'cause there is no right click on some mice and I'm gonna go down to code Navigator. Now what the code navigator does is what I had selected.
So I've right clicked exactly on this nav bar here. It's telling me everything that is to do all the CSS that is styling this nav bar. So you can see there's a lot of CSS. Now what I need to do is start at the bottom. Okay? And there is something called roboto and there's a color that is part of this nav bar.
That is not what I'm looking for, okay? Because the color is to do with the font that I created earlier. So now we're gonna jump in. There's my main CSS. There's nothing really being controlled by my CSS that I've made, but there's lots being controlled by the bootstrap one. So let's start at the bottom here.
There's a border color called E seven E seven. E seven. Um, so there is a border color on there. It's not what I want at the moment. It's probably something I have to change. Um, I'm looking for margin, right?
Left. No, there's something to do with margins. No, I'm looking for background color. Okay. Or some sort of fill color that I can go in and adjust. No padding, padding, padding, all sorts of stuff I don't need.
Uh, widths and heights. Yes, yes, yes. Collabs container. Oh, width, no width. Width, no. Ooh, this looks good.
So nav bar hyphen default. It might not be the right one but, so let's go and try it 'cause it's got a background color that I wanna change, uh, of F eight. So I'm gonna click it and what it does is edit it shows me and you can see it's locked because it's the bootstrap. I don't want to edit it, that's fine. But I can view it. The cool thing about that is that what I want to do is grab it.
Okay? I don't want to edit it here 'cause I'm working on the bootstrap and actually I can't because, uh, Dreamweaver locks it for me. Good old Dreamweaver. I'm gonna copy it. Okay? I'm gonna go to my main CSS, go to the bottom and paste it in here.
Now this will allow me to override it. So though, um, in the moment, what is this one here? It looks like the right color for hover above it and Cove view the, that color there. And what I can do, I can type it here if I know my code color. Uh, but I don't know the code actually what's black? 0 0 0.
I think it's awesome. Give it in three or six when it comes to those smaller, um, easy colors. Um, and you can see, let's change it to black if you have a different color that you want to use. And what you could do is make sure you're in your CSS designer panel me your main CSS go down the bottom. Here's this nerve by default show set. You can see here background color.
I can change it in here as well. Um, I'm gonna use this one because what I want to do is I want it to be black, but I want to use, we've been using hex a lot in this color. Um, this course. So hex is these numbers with the hash at the front of it and it's really common to use these at the moment. It's getting more and more common to use these RGBA colors. The reason we like RGBA is that it has the exact same colors except that it has this a at the end, okay?
Which is the alpha or the transparency. So what I can do is I can pick black and then I can lower down the opacity. Okay? So I can get it to something that, uh, when things slide underneath it, I'll be able to see through it a little bit. So I'm gonna lower it down quite a bit to give it. And so I can show you, you see it's got a bit of a gray color, which is not, it's so the transparency is too high at the moment.
But what it does is, can you see when you can, you can see through it and go underneath it. So I'm gonna change, uh, it actually to um, let's have a look. Let's make it a lot darker so it starts life even darker. Lovely. Alright, that's gonna work for me. So that's how to use the code navigator.
We might've got it wrong and we might've gone through and uh, it might've been the background and color for something else. So just make sure when you are working through something and you dunno what it is, if I right click, um, right here, if I right click this text and I go to code Navigator, it's gonna tell me that it's this H one start at the bottom. Remember H one and actually bingo, it's the right one. I wanna change the color of this font. And you can see it here, H one and there's the color for the font. Okay?
So you can right click anything and it will give you kind of indicate what is being controlled by this, uh, CSS. Last thing we'll do before we move on is you'll notice that there's a white gap here that has appeared. I kind of hinted at it before. It's in the code view. So if I jump to code view bootstrap likes two, I'm gonna go code view, I'm gonna go source code and I'm gonna go right to the top and I'm gonna find my, there's my head and there's my body. I put a few returns in here.
Returns in code don't mean anything. So it just helps me separate the body in the head. And there's a style that's been added here. There's a bit of padding, um, just to make it look nice. I want to get rid of it completely. So, goodbye styling.
It's a bit of inline CSS Um, you can see here they've added the CSS directly into the body tag. Normally this gets, you'd style the body tag and you'd put this padding over in your CSS, but um, bootstrap was edited in there. I wanna get rid of it because I want it to sit underneath. Can you see here, if I go to the top now there is uh, the gray box that's completely underneath now. So you'd probably need, if you had a full colored nav, um, you'd probably need that 70 pixels to push it from the top so that you can see underneath. What I might also do while I'm here just to tidy it up, is I'm gonna gonna select this.
I'm gonna make it a little bigger. It's a bit small there, Okay? And what you'll notice is that it's got a specific height. Can you see it's not being pushed down anymore. So what I wanna do is I'm gonna click on this guy, I'm gonna figure out what controls the height by using my code navigator. So it's not you guys.
Margin, margin, margin. So it's got a max height of, there's a max height. I wanna see if there's a min height. Okay, so there's nothing showing the height. It's probably the thing controlling the height. Okay?
So I can't see a height in there. The thing holding it open is probably these buttons here. There's a padding at the top of the bottom holding this out. What I'm gonna do is actually give it a physical, um, specific height. So what I'm gonna do is add a bit of, um, specific height to actually maybe just some padding to the, um, one of these high level classes here. So nav bar probably is gonna work for me.
So what I'm gonna do in my style is that I'm going to create a selector. And what of this group do I need? Uh, you could experiment. I know 'cause I've had a bit of a play, um, with the nav bar. So I'm gonna, um, override some of the styles or add a style to Neva and my own CSS and I'm gonna play around with height. So I'm gonna put in a heights of pixels and let's go with 50.
How big is that? Not big enough. 70. All right, maybe 60. That feels about right. Let's go out to my preview version and that sits nicely.
Let's do a file save. All right, so that's how to use the code navigator. What I'm gonna do is I'm gonna set you a little task. I just noticed in the preview here, there's this little white line around the outside here, which I want to get rid of. It's not in my um, uh, visual. I want it to have just no border around it.
So I want you to use your code navigator, use your mad new Dreamweaver skills and see if you can find and override the CSS that is controlling this white line here. Go and do it. You'll be super proud of yourself if you can crack the code. Uh, if you don't, just skip to the next video and uh, we'll do it there together. Alright, see you the next video.