Video: Adjusting our navigation

So we obviously need to do something about this navbar. It doesn't look very good. Our brand is sort of over to the right-hand side, and obviously the colors aren't looking correct. Now take a look at the code for the code on the Bootstrap website in version 2.3, which is what this is, and compare it with version three. So you can see here that the first div is a class of Navbar. Which, on the 3.0 version, is exactly the same way. If we go back to 2.3, and we look at the next div, it has a class of navbar inner.

Bootstrap 3 is here, and it supports mobile design and responsive CSS better than ever. Join author Ray Villalobos for an overview of the new classes, mobile-first approach, and other enhancements in Bootstrap 3, and learn how to migrate your sites and files to the new framework. Find out about the new installation options, updates to grids and scaffolding, and changes to the handling of type, images, and JavaScript. Then learn to integrate the new list group and panel components into your workflow. The course closes with a look at migrating a sample site from Bootstrap 2.3 to 3.0, from replacing template files to tweaking your grid, navigation, and images.

Adjusting our navigation

So we obviously need to do something about this navbar.It doesn't look very good. Our brand is sort of over to theright-hand side, and obviously the colors aren't looking correct.Now take a look at the code for the code on the Bootstrap website in version 2.3,which is what this is, and compare it with version three.So you can see here that the first div is a class of Navbar.Which, on the 3.0 version, is exactly the same way.If we go back to 2.3, and we look at the next div, it has a class of navbar inner.

In version three, that is no longer necessary.So it's not even there. So we need to watch for that.Next is the brand itself. And anchor tag in 2.3 had a class of brand.This anchor tag has a class of navbar brand.So these kind of changes can drive you a little crazy in the new version of Bootstrap.They seem to sort of reclassify a lot of things, and you need to watch out for those.So, let's see, the unordered list has a class of nav and Navbar-nav.And in the old version, it was just called nav.

So we also need to watch out for that one. Let's go into our code, and look at thecomponents, and then php, and look for our header.There it is. We need to fix some of these.Now, one thing I said is that you no longer need this Navbar inner div right here.So I'll take that out, and of course, I need to take off.The closing diff, so that's gone. We'll change the class for the brand.Right now, it's called brand, and it needs to be called navbar-brand.And the unordered list needs to have a class of nav like it used to before, butthen we also need to add Navbar-nav. So if we save that, and we go over to oursite, we'll refresh, and everything's looking pretty good.

I can see that there are some CSS problems that I need to deal with.I don't know if this is because this is an early version of Bootstrap, but for somereason, this right here is not short in my version.This is normally not this long on the Bootstrap website, so it's going on twolines, and it doesn't look very good. For that, really, we need to get into some CSS.Let me just pull up the delevoper tools. I'm using Chrome, so I'm going toright-click and choose Inspect Element. And I actually want to inspect elementright here, on the brand and see what's happening.

If we scroll down on the right-hand side, eventually we'll get to something that hasthis element as having a max width of 200 pixels.So if we take that out, you'll see that it's now the proper width.And if you want to do that on your website, it means that we're going to haveto add a class. So to overwrite that, you just go intoyour CSS somewhere. I'm just going to put it here in the Stylesection, and change the maxed width here to none.That'll take care of that problem. Then obviously, we need to modify thepadding that it's adding at the top and bottom.

So I'll just do that here to show you you can do this in your CSS file, paddingbottom, and I'll just set it to zero. I don't really need padding at the bottom,and then padding top, and we'll set that to four pixels.See how that looks. That looks good, and it looks pretty goodand that fixes most of my problems. Now there's going to be lots of otherlittle things that you're going to have to fix.You probably noticed that I have customized my CSS quite a bit.You may want to get rid of these rounded edges, that one's going to be actually inthis class of Navbar. And then we can just say, border radius,take out border radius here. And set to zero, that makes it nice and square.

Obviously, this is going to be different on your website, really every website isgoing to be different. There's some other CSS style.Changes that you're going to have to make, like you can tell the fonts aren't quiteright, you probably need to create a style that makes all these fonts.Kind of like what they used to be, custom fonts.So you're still going to have to go in and modify lots of other things but hopefully,I've been able to catch most of the big problems that you're going to have whenyou migrate your old website into version 3.0 of Bootstrap.

There are currently no FAQs about Bootstrap 3: New Features and Migration.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.