How to customise Bootstrap nav bar using Dreamweaver's code navigator

Hey, my name is Dan. In this video we're going to look at the Code Navigator. Now, what we've done in the previous video is we've added our Bootstrap Navigation at the top. We've done some basic customizing. We've gone and changed the lengths, we've added an image. Now we want to 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 little drop shadow here. I'm going to go and replace it all, 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's a bunch of code that goes into this navigation. And there is even more styling that goes in to make it happen. So I figured out what does what. And we're going to learn something called the Code Navigator. The Code Navigator's pretty easy. I'm going to select this 'nav bar' at the top here. I'm going to right click. So right click, on a Mac you might have to hit 'Control' click, because there is no right click on some mice. I'm going to go down to 'Code Navigator'. Now what 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. And there is something called Roboto. And there's a color that is part of this nav bar. That's not what I'm looking for because the color has to do with the font I created earlier. So now we're going to 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 E7E7E7. So, there's a border color on there. It's not what I want at the moment. Probably something we have to change. I'm looking for margin, right, left, no. It's something to do with the margins? No. I'm looking for background color, or some sort of Fill color that I can go and adjust. No padding, padding… All sorts of stuff I don't need. Widths and heights. Yes. Collapse 'container', 'width'? Not width. This looks good. So 'navbar-default'.

It might not be the right one but let's go and try it. It's got a background color that I want to change of F8, so I'm going to click it. What it does is, it shows me-- 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. I don't want to edit it here, because I'm working on the Bootstrap. And actually I can't, because Dreamweaver locks it for me. Good old Dreamweaver. I'm going to copy it. I’m going to go to 'main.css'. Go to the bottom. And paste it in here. Now this will allow me to override it. Where is this one here? It looks like the right color, if I hover above in Code view, it's that color there. And what I can do, I can type it here if I know my code color, but I don't know the code. Actually, what's black? 000. I think. It is. Awesome. Putting in 3 or 6, when it comes to smaller and easy colors. You can see, it's changed it to black.

If you have a different color that you want to use, what you could do is, make sure you're in the 'CSS Designer' panel, the 'Main CSS', go down the bottom. It says nav by default, 'Show Set'. You can see here, background color, I can change it in here as well. I'm going to 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 course. So Hex is these numbers with the hash in front of it. 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, which is the alpha, or the transparency.

So what I can do is put black, and I can lower down the opacity. So I can get it to something that, when things slide underneath it, I'll be able to see through a little. Lower down quite a bit to give it-- I wish I could show you. You see, it's got a bit of a gray color which is not-- the transparency is too high at the moment. What it does is, can you see, you can see through it, and go underneath it. So I'm going to change it actually to-- let's have a look, let's make a bit darker. Even darker. Lovely. It's going to work for me.

So that's how to use the Code Navigator. We might have got it wrong. We might have gone through, and it might have been background color for something else. So just make sure, when you are working through something, and you don't know what it is-- if I right click, right here, if I right click this text, and I go to Code Navigator it's going to tell me that it's this 'h1'. It's right at the bottom, remember, 'h1' And actually, bingo, it's the right one. I want to change the color of this font, and you can see it here, 'h1'. And there's the color for the font. So you can right click anything, and it will kind of indicate what is being controlled by this, the css.

Last thing we'll do before we move on is, you'll notice there's a white gap here that's just appeared. I kind of hinted at it before, it's in the Code view. So if I jump to 'Code' view Bootstrap likes to-- I'm going to 'Code' view, I'm going to go to 'Source Code'. And I'm going right to the top, and I'm going to find my 'head'. And there's my 'body'. I've put a few returns in here. Returns in Code don't mean anything. Just helps me separate the Body and the Head. There's a Style that's been added here. There's a bit of Padding. Just to make it look nice. I want to get rid of it completely, so goodbye, styling. It's bit of inline css. You can see here, I've added the css directly into the Body tag. Normally you'd style Body tag, and you'll put this Padding over in your css, but Bootstrap has added it in there. I want to get rid of it, because I want it to sit underneath.

If I go to the top now, there is the gray box that is completely underneath now. So you probably need-- if you had a full colored Nav, you'd probably need so many pixels to push it from the top, so that you can see underneath. What I might also do while I'm in here, just to tidy it up, is I'm going to select this, I'm going to make a little bigger. It's a bit smaller. And what you'll notice is, it's got a specific height. Can you see, it's not being pushed down any more. So what I want to do is, I'm going to click on this guy. I'm going to figure out what controls the height, by using the Code Navigator. It's not you guys. Margin. So it's got a 'max-height' of-- there's a max-height, I want to see if there's a min-height. So there's nothing showing under Height. It's probably, the thing controlling the height-- I can't see Height in there. The thing holding it open is probably these buttons here. There's a padding at the top and the bottom holding this out.

What I'm going to do is actually give it a physical specific height. What I'm going to do is add a bit of specific height to-- actually, I might just do some padding to one of these high level Classes here. So Nav Bar is probably going to work for me. So what I'm going to do, in 'My Style', is that I'm going to create a 'Selector'. And what of this group do I need? I'm going to experiment. I know because I've had a bit of a play with the Nav Bar. So I'm going to override some of the Styles or add a Style to Nav Bar in my own css. And I'm going to play around with Height. I'm going to put Height in pixels, and let's go with '50'. Not big enough, '70'. Maybe '60'. It feels a bit right, let's go out to my Preview version. And that sits nicely. Let's go 'File', 'Save All'.

That's how to use Code Navigator. What I'm going to do is give 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 my visual. I want to Tab to this 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. If you don't, just skip to the next video. And we'll do it there together. All right, see you there.