🚨 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

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0
0
0
0
0
0
0
0
0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 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.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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.

What is the target audience?

  • 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 Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

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

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025