New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Making the nav bar responsive with JavaScript

From: Up and Running with Bootstrap 2

Video: Making the nav bar responsive with JavaScript

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.

Making the nav bar responsive with JavaScript

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.

It's possible to add some JavaScript to this to make the navigation bar a bit more responsive. It's not the only approach to making a navigation bar more responsive, many would argue. It isn't even the best approach using a JavaScript solution. But this is a great effect that comes with Bootstrap that will give you the option of having your navigation bar shortened as the screen sizes get a bit smaller. And I'm going to show you how that works now. So if you open up the Dreamweaver document inside your exercise files, this is the finish point for the last video from the last chapter.

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.

So you'll notice that this has been assigned a few classes, both the button and btn-navbar, and then you see this JavaScript calls for toggle collapse and data-target of .nav collapse. So what these are doing is they're integrating the JavaScript into this web page to make this little icon expand when it's clicked inside of the bar. So if you copy in this code just like this, this is going to make your navbar responsive. You can certainly swap out these three lines here where you have the three icon bars.

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.

So we had a bit of code that triggered the JavaScript to cause the effect of this open and close right here on the web page as I click to open and click to close. And we added some markup that indicates what's supposed to show and hide when that button is clicked.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 2
Up and Running with Bootstrap 2

32 video lessons · 19373 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.