🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How to customise Bootstrap nav bar using Dreamweaver's code navigator
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.
- You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.
- No previous Dreamweaver or web design experience is necessary.
- If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.
- 60 lectures 3 hours of content!
- Forum support from me.
- All the techniques used by professional website designers.
- Ways to preview your designs straight to your mobile device.
- Firm understanding of responsive web design.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
- YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.
- NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.
Course duration 5.5 hours + your own study.
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
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.
How do I change a Bootstrap navbar’s styling in Dreamweaver?
Right-click the navbar and choose Code Navigator to find the CSS rules controlling its appearance. Copy the relevant rule into your own stylesheet, such as main.css, and change it there rather than editing Bootstrap directly. You can then adjust the background colour, transparency and height, checking each change in preview.
How to Customise a Bootstrap Navbar Using Dreamweaver’s Code Navigator
Key Takeaways
Find the CSS responsible for a navbar’s appearance without searching through the whole Bootstrap stylesheet.
Keep your custom styles in main.css rather than editing Bootstrap’s original rules.
Use RGBA colours to give the navbar a transparent background.
Identify unwanted body padding and adjust the navbar’s height.
Practise the same inspection process on headings, borders and other page elements.
You’ve added your Bootstrap navigation, changed the links and edited the logo image. Lovely. Now it needs to match your design rather than look like the default Bootstrap navbar.
The tricky part isn’t necessarily choosing a new colour. It’s finding out which bit of CSS is producing that pale grey background, the border and the little edge that looks like a shadow. There’s quite a lot of styling involved in a navigation bar, so guessing your way through it can get frustrating.
Code Navigator connects the element you select with the CSS styling it. That gives us somewhere sensible to start.
1. Open Code Navigator on the Navbar
In Dreamweaver’s visual page area, select the navigation bar at the top. Right-click directly on it, then choose Code Navigator. On a Mac, you can Control-click if your mouse doesn’t have a right-click option.
The panel lists the CSS rules associated with the selected element. You’ll probably find quite a few. Some relate to the navbar itself, while others contribute typography, spacing or layout.
Start at the bottom of the list and work upwards, inspecting the declarations for each selector. The important thing is to look for the property that matches the change you want to make.
color controls text colour, not the background.
border-color controls the colour of an edge.
margin and padding relate to spacing.
background-color is the property we’re looking for here.
For example, you might come across the Roboto font styling created earlier. It contributes to the navigation’s appearance, but it won’t explain the grey background. Likewise, the border colour #e7e7e7 is worth noticing, but it isn’t our first target.
2. Find the Background Rule
In this example, most of the navbar’s appearance comes from Bootstrap rather than the custom main.css file. Working through the selectors brings us to .navbar-default, which contains a background colour of #f8f8f8.
That looks promising. It’s a very light grey, which matches the background we’re trying to replace.
Look for a background-colour declaration rather than changing the first colour you find.
Click the selector to open its CSS. In this setup, Dreamweaver protects the Bootstrap stylesheet from direct editing. That’s fine: we want to inspect the original rule, not alter it.
Finding a likely rule is a test, not a guarantee. If changing it affects something other than the intended background, go back to Code Navigator and inspect another candidate. You don’t have to get it right on the first attempt.
3. Override Bootstrap in Your Own Stylesheet
Once you’ve found the relevant rule, copy it. Open main.css, go to the bottom and paste it there. Make your changes in that custom stylesheet.
This keeps the Bootstrap styling separate from your own adjustments. In the project setup here, the copied rule in main.css lets us override the original navbar styling.
Copy the .navbar-default rule from the Bootstrap stylesheet.
Paste it at the bottom of main.css.
Change its background-color value to black.
Check that the navigation background changes.
Black is #000000, or the shorthand #000. Either works for this colour. The immediate change from pale grey to black is a useful confirmation that we’ve found the right rule.
If you prefer working visually, you can make the same adjustment through the CSS Designer panel. Select main.css, choose .navbar-default and find its background colour setting.
4. Use RGBA for a Transparent Navbar Background
A solid black navbar is a good starting point, but I want a little transparency so that content can show through as it slides underneath.
We’ve used hex colours so far, which are the familiar values beginning with a hash. RGBA gives us red, green and blue colour values, plus an extra component: alpha.
Alpha controls how opaque the colour is. Lower it and more of the content behind the navbar becomes visible. Raise it and the background becomes more solid.
Open the background colour picker in CSS Designer.
Use the RGBA colour format.
Choose black.
Reduce the alpha or opacity setting.
Scroll the page to check how content looks beneath the navigation.
Use the colour picker to adjust the navbar background’s transparency.
If you lower the opacity too far, black can look surprisingly grey against the page behind it. That’s what happens in this example, so I bring the opacity back up until the navigation looks darker while still allowing a little content to show through.
The useful test is how it behaves over the page, not just how the colour swatch looks.
5. Apply the Same Process to Other Elements
Code Navigator isn’t just for navigation bars. Right-click a heading, for example, and it will show the CSS associated with that text.
For the main heading here, working from the bottom of the list reveals an h1 rule containing the font colour. Bingo. If that’s the colour you want to change, you’ve found a relevant declaration.
The process stays the same: select the exact element, inspect its rules, find the relevant property and test your change. Selecting precisely matters because clicking the text and clicking its surrounding container can lead you to different styling.
6. Remove the Unwanted Gap Above the Content
There’s another detail to tidy up: a white gap near the top of the page. This one comes from styling written directly into the HTML.
Switch to Code view, open the page’s source code and locate the opening body tag, just after the head section. In this example, the generated page includes inline CSS on that tag, adding 70 pixels of top padding.
That padding pushes the page content down. I want the content to sit underneath the transparent navbar, so I remove the inline padding style.
Normally, if you wanted to keep that spacing, you’d style the body in your stylesheet rather than leave the declaration directly in the HTML. Here, though, removing it produces the overlap the design needs.
Don’t remove top padding automatically. With a fully opaque fixed navbar, that space may be useful for keeping the beginning of the page visible below it. The right choice depends on whether your design calls for content beneath the navigation or below it.
7. Adjust the Navbar Height
After enlarging the logo slightly, the navbar needs a bit more room. This is another opportunity to inspect before changing anything.
Open Code Navigator on the navigation and look through the sizing and spacing declarations. You may find minimum or maximum dimensions, but there isn’t always one obvious height setting responsible for what you see.
In this example, the links and their top and bottom padding appear to contribute to the navbar’s height. Rather than continuing to hunt for a single existing height declaration, I add my own.
Select main.css in CSS Designer.
Create a .navbar selector.
Add a height in pixels.
Try 50 pixels, then compare it with 70 pixels.
Settle on 60 pixels, which suits this layout.
The 50-pixel version is too small here, while 60 pixels feels about right. These are values for this particular design, not a rule that every navbar needs to follow.
Open the browser preview to check the result, then choose File > Save All.
Check the navbar’s height and spacing in the browser preview before saving the finished changes.
Your Turn: Find the Thin Border
There’s one remaining detail: a thin light line around the navigation that isn’t part of the intended design.
Use your new Dreamweaver skills to investigate it. Right-click the navbar, open Code Navigator and look for the CSS controlling that edge. Then override the relevant styling in main.css so the border no longer appears.
Keep the background, spacing and border separate in your thinking. They can look related on the page, but they’re different properties. Finding the rule yourself is the useful part, and you’ll be pretty pleased when that last unwanted line disappears.
Key Terms
Code Navigator
A Dreamweaver tool that lists CSS rules associated with a selected page element. It helps you trace a visible design detail back to its styling.
CSS selector
The part of a rule that identifies which elements it applies to. Examples here include .navbar-default, .navbar and h1.
CSS override
A custom rule that takes precedence over an existing declaration. Here, the navbar adjustments belong in main.css rather than the Bootstrap stylesheet.
RGBA and alpha
RGBA describes a colour using red, green, blue and alpha components. Alpha controls the colour’s opacity, allowing the navbar background to be partly transparent.
Inline CSS
Styling placed directly on an HTML element through its style attribute. The body’s top padding in this example was applied this way.
FAQs
Should I edit Bootstrap’s stylesheet to change the navbar?
No. Use Bootstrap’s stylesheet to identify the relevant rule, then copy it into your custom stylesheet and make your changes there. In this Dreamweaver setup, the Bootstrap file is protected from direct editing.
Why does my transparent black navbar look grey?
A partly transparent black background blends with whatever is behind it. If it looks too light, increase its alpha or opacity setting until it has the darker appearance you want.
Why is there a gap above my page content?
In this example, the body tag contains inline styling that adds 70 pixels of top padding. Inspect your source code before removing it, because that spacing may be useful when the content needs to sit below an opaque fixed navbar.
What if Code Navigator doesn’t show an obvious height rule?
Inspect the surrounding sizing and spacing declarations, including padding on the navigation links. You can also add a height to a suitable selector in your own stylesheet, as with the 60-pixel .navbar height used here.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
