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.