Hi, everybody. Today, we're going to talk about navigation bars. Navigation is one of those things about Bootstrap, that's very familiar to people when they see sites that use Bootstrap. It always looks about the same. It works about the same. People are comfortable with it. The nav class is typically combined with other classes to create each different style navigation that you're going to see. When you make a navigation bar, one of the first things you have to decide is what type of links you want. Bootstrap provides nav-tabs and nav-pills. So, let's take a look at what these look like on the browser. Let's start with nav-tabs. The first thing I hope that you would look at and see is that it doesn't look very good. I've got the code. I've taken it from Bootstrap. I went in and I used the nav class right here. Oops, change that to yellow. I used the nav class right here and I also included the nav-tabs class. This is something new people haven't always seen, that you can use multiple classes within the class. So used it, looks correct, looks great, but I don't see any difference. This is something that's going to happen to you. The problem is I haven't linked to the Bootstrap CSS. Let's go ahead and do that now. I'm going to go into Settings, I'm going to click on CSS and I'm going to go down here to quick add and add Bootstrap. And as soon as I save that, boom, there you go. That looks like a much more professionally designed navigation bar. So when you use the tabs, it's supposed to simulate that kind of look you see in a file tabbing system where you kind of flip through. Now, let's look at nav-pills. Here you can see that each one of the links, basically, has a different color. So you can go in, this one is blue, the other one's are white. They all have that kind of same square look. The reason that this one is blue and the others aren't is because I've added what's called an active class. This class right here says, I want to distinguish this link from the other links. So, let's make it a different color. I can play with that code and I can change it, so that instead of having this link be active Got it? Let's put it here and now I've made the other one. It's not really a big deal whether you're going to use pills or tabs. It's just a design decision that you want to make a little bit early on. Once you've decided on either tabs or pills, another thing your going to consider is the layout. Do you want your navigation bar to be horizontal, vertical, justified? There are few different options and I'm going to show you right now how you can quickly change them. Let's go ahead and just use the nav-pills code. When I go back up to that unordered list element, I have that it should be nav in nav pills. What I want to add now is to say, you know what? Instead of being horizontal, I want to change it, so that it's vertical or stacked. This simple class completely changes the look of our page. Another option that we can use is nav-justified. When you use nav-justified, by default, it's going to take as many links as you have and spread them out proportionately. So here, because I have three links, each link takes up a third of the page. If I had five each would take up 20% and different things like that. Now the interesting thing about nav-justified is that when you resize the window, it actually changes the look of the page. So now as I make it smaller, it changes from justified per stack. This gives a kind of really cool look without you having to do much about it. So on the small view, you go to stacks. On the larger views, you're horizontal. Another thing you see a lot of people like to add to their navigation bars are these drop down menus where you have different options, but some of the options have suboptions to them. If you want to use drop-down menus, it's very important for you to remember to link to the Bootstrap JavaScript files and include that link at the bottom of your code to jQuery. So, lets go ahead and take a look at what we can do. The example on Bootstrap is called pills with drop-downs. I've made my own example and we're going to look at it now, it's called responsive design drop downs. So I've taken the code that they've used in Bootstrap and I've made it, so that it just looks a little bit more complete. I added in some regular links next to our drop down link. Now hopefully, when we go through, you would think that when I click on the drop-down, something should drop-down and it didn't. I do this on purpose, because I really like to make the same mistakes that you guys possibly make. So first, I need to know, did I link to the Bootstrap JavaScript files? I can check up and there's nothing there. I can check my settings and I can see, yep, I forgot to add the Bootstrap files. Save. I've saved it. I go down, it still doesn't work. What could be going on that where I'm linking to it, but my JavaScript or something dynamic isn't happening? This occurs a lot. So while I haven't actually forgotten it as you may have, I did comment it out. I'm going to go back here and say, oop, I know there's a script I'm supposed to have down at the bottom. The one that links to jQuery, I'm going to save this now and you can see that now the drop-down option works. Using bootstrap is not meant to be difficult, but there are all these little tripping points. That's why I encourage people to add code slowly and incrementally and keep testing every few minutes to make sure that you're on the right path. The last class I'm going to talk to you about, with respect to navigation right now, is the navbar class. What it does is it kind of serves as a navigation header for either just that one part or your entire site. When you use navbar, the positioning is very important. You can have navbarstatic at the top. Navbar-fixed to the top or navbar-fixed to the bottom and this is going to affect where your different, where your navbar is going to show up and how it interacts with the other elements. Let's take a quick look. What I have here is that I've wrapped up my typical nav with nav-pills and I've put it inside of a navbar class. I said, you know what? I want to use navbar, let's use the default values and I want it to be navbar-static-top. This means put it at the top of the page and as people scroll down, you can see pretty much nothing's going on as I scroll back and forth. That's how I want it to be, it's just always at the top. However, instead of being static, I can go in and I can change this to fixed before I can even hit Save. I hope you notice that my content actually moved. I have changed the positioning of my navbar from static to fixed and fixed is what I call the annoying pop ad version of positioning. It means it's on top, it's not going to move. So if I go back down to my screen now, you can see that it actually hides some of the other stuff that's there. I'm going to make my screen smaller, you can see I can kind of scroll up and down here, but it's impossible to see the things that are underneath the navbar. So when you use fixed just be careful, the last option was to use bottom. And herem what I've done is I've simply moved my navbar from the top to the bottom. But many times with fixed content, this works out much better, because it doesn't cover up other things and at least take away the ability to scroll up and down and at least see them. Back when you were learning about HTML, hopefully, you learned about semantic tags. Some tags are very generic div, P, different things like that. Other tags have meaning. Nav tag is one of those, it help convey the semantics that this is a navigation section of your page. Using a nav tag and a nav class are not the same. A nav class does not convey any semantics. So whenever possible, augment your bootstrap by using that nav tag. You can really just put it right before, close it right underneath what you are doing with navigation. Another option is to use what is called an "ARIA" attribute where you can put role = "navigation" and it provides the same type of accessibility information that that nav tag will provide. So let's go back, look at that code that I've provided, add some tags, play with the code. See how you can get your own navigation bar to show up on the screen.
