Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last chapter of this course, we created this navigation bar for our website. And it looks great while it's running here on a Desktop and my browser is maximized, but as I reduce the size of my web browser, this navigation bar wraps on to another line, which is fine for a little while, but when we get down to a browser size that would simulate a mobile phone size, you'll see here that the navigation bar can get quite long and fat, and that's probably not really an effect that you'd like to have.
We're going to add some additional code to this. Also inside your exercise files is a little text document here that contains some code. So this is the first little bit of code that we're going to add to our Dreamweaver page here. I'm just going to go ahead and highlight this bit of code here and say Edit > Copy. And then inside of my Dreamweaver page, just after the navigation tag but before the brand, so after this div right here but before that Roux Academy Conference line, I'm going to Ctrl+V or Command+V to Paste that in place.
And I'm going to give this just a little bit of formatting here, just so we can make it a little bit easier to read. There we go. So what is this little chunk of code that we just copied in here do? Well, first of all, you'll see these three lines, lines 20 through 22, these are calling the glyphicons. So there's an icon that's called the icon bar. It's just a little line, and we have three of them here stacked on top of each other. So, that's all that part is. The interesting part with a part that makes this interactive is what's inside of the a tag, the clickable link here.
You can take those out. You can put in a word like menu, for example, or you could put in a different icon if you wished so that there's something different that's clickable, and you would not change the functionality of what's happening here. The second part to what we have to do is show what's going to be hidden as the navigation bar collapses in size. And so we probably don't want to hide the brand, but we do want to hide all of this navigation right here. So what we're going to do is we're going to add another div tag here, and we're going to give it a class of nav-collapse.
We'll close immediately after the bulleted list. If you're working with a later version of Bootstrap than version 2.1 that I'm using here in this video, you may also need to add a class of collapse. So, line 26 will read div class = "nav-collapse collapse." So, this particular div is indicating this chunk of code will be hidden as the navigation bar gets smaller.
And the media query is going to trigger to display this navigation bar with just the brand, and this little button, because the rest of this which is inside this div of nav-collapse will be hidden when that transition happens. So go ahead and Save this page -- Ctrl+S or Command+S to Save. And if we put this into Firefox and I Refresh the page, immediately we don't see anything here with my browser maximized here on my Desktop computer. But if I make the page smaller, you can see that long around, actually quite wide, this icon now appears.
Remember, that's the glyphicon. We have the three bars that are stacked on top of each other. And as I make the page progressively smaller, then the navigation bar is resizing very nicely. When you click this button, you'll notice that we get the full menu comes on up here with things oriented in a vertical manner. Any content that you have on the page will be pushed down underneath this black box. So this is how you can go about making your site navigation bar responsive just by adding these two bits of code.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.