Hi everybody, welcome back to another Code With Me. What I want to do today is take some code that you're really likely to find online. And that's the code for using Bootstrap to make a collapsible navigation menu. Let's take a look at what happens when we put it into CodePen. So what I have here is the HTML that's needed to make a really kind of cool, collapsible navigation bar. It's the kind where it's regular when it's large screen, but when you make it small, you get this little like hamburger icon. Well, as you can see, this is not a good looking page yet. And it's not up to me to add the CSS, because I'm trying to use Bootstrap classes. So, I want to walk through with you the things that you would need to do in order to get this to work. Now, if you were using an editor such as Sublime or Atom, you would want to go in and actually edit the head of your document because you need to remember to link to the style sheets. When we use CodePen, we can just do this. Settings > CSS, you know what? I want to add Bootstrap, and I've got it. As soon as I do that, you can see like, hey, this is a really much better looking navigation bar. I've got all the different components. And if you watch, as I re-size it and make it smaller, we get this kind of collapsible menu. People tend to call this the hamburger, because you have the three lines. Although I'm sure they'll change the nickname at some point just to make me look old-fashioned, but this is the kind of look that we're going for. Where do these different parts come from? Well, if you look right here, you can see that I've got three classes called icon-bar, icon-bar, icon-bar. That's where this little part is coming from. So now, everything looks really great. The problem is if I actually go to open it, nothing's happening. I'm clicking and clicking, and nothing's going on. This is just another example of why code snippets can get you into trouble. What we want to do is we need to remember that most of the interactivity on a page is due to JavaScript. So let's go in and add that JavaScript code. All right, so I added the link to the JavaScript and I'm going to make it smaller, and again, the icon appears, but when I click on it, it's still just not working. Sometimes when you use CodePen, it's hard to know what kind of links are working and which ones aren't. So what I'm going to do right now is I'm going to take this same code I was using on CodePen, but I'm going ahead and I just changed it to use in editor instead. So let's take a look at that code. Right here, I wrote the code on my own, and when I minimize it, it's the exact same code. You can see that the menu bar opens and closes naturally. What I really like about writing my own code sometimes instead of CodePen is that it's also much easier for me to use inspect element to look at what's really going on, so let's do that for a second. So I've resized it to full screen. I'm going to go ahead and show you the page source for just a second there. I know you can't see it, I'll post it online. The important thing to know is it's exactly the same code. And I remembered to include the links to Bootstrap, oops, let's do it, to Bootstrap, to jQuery, and the Bootstrap JavaScript as well. So I have those three files. What I'm really interested in and what you should be really interested in is what's going on with these individual lines of code? What do they mean because if you're going to use Bootstrap, and you want the coolest things, you find that it can be a little overwhelming at times, so let's take a look. I'm going to start with the mobile view because I'm really curious how this showed up. Why is this here when it wasn't here before, so if I right-click and do inspect, I'm going to get my second window over here. And it's really helpful because I can go in and I can say like there's this button. This button that I want to look at, and right away, you can see all the details. You can see the border color, the position, all the things that you're really kind of interested in. But what I'm more interested in is how does it change when the screen gets bigger? So I'll go back over here, make the screen a little bit bigger. And look, right in that same general area, you can see that now it's displaying none, where before, it used to have different parts to it. So this is my recommendation for you as you try to do advanced navigation bars using Bootstrap. One, avoid using CodePen and try to use your own editor to kind of start from scratch. That gives you the power to quickly see if you're linking to all the style sheets and the JavaScript and the jQuery. Second, it's a lot easier to use inspect element to see which parts are working and which ones aren't. Go in and play with the code a little bit and figure out if you can change it so your icon is four lines instead of three or two lines. It's playing with these little things that's going to help give you the practice you need to use Bootstrap or write your own code effectively.
