Responsive Navigation Using Bootstrap

Do you need to build projects quickly? And you’re taking too much time to style just the navigation itself?

Save your worries by delegating this using Bootstrap.

1. Set up your Bootstrap CDN for CSS or download it.

You can download Bootstrap from their website and make sure to link it in your head. Or you can just copy Bootstrap CDN and link it in your head just like this.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Then, you can link own CSS after that so it’ll override the design you want to override.

2. Set up your jQuery CDN and Bootstrap CDN for JavaScript.

You can search CDNs in your favorite search engine. And just link it before your closing body tag. Always put your jQuery CDN first before Bootstrap CDN for JavaScript.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

You can then link your own script after that.

Make sure all your CDNs are properly set up.

Remember, we’re using Bootstrap so we will code how Bootstrap wants us to code. That’s why it’s a framework.

3. Markup your navigation like this.

<nav class="navbar navbar-inverse">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#header">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

1. Your nav has a class of navbar and navbar-inverse.

1. navbar – Bootstrap has its own styles for each class. And this is the basic class for the navigation.
2. navbar-inverse – This will make your navigation black and white.
3. navbar-default – This will make your navigation greyish. So you will only use either navbar-inverse or navbar-default. 
4. navbar-fixed-top – If you add this, your navigation will be fixed on top even if the user scrolls down the page.

2. Inside nav, let’s add div with a class of container.

1. container – Bootstrap sets up a certain amount of padding.

3. Inside this div.container, enclosed your menu inside a div.

In this example, I gave my div an id of navbar. Add your list of menu items inside this div.

The following classes are to be added in your ul tag.

1. nav, navbar-nav – Bootstrap makes your menu items float side by side and makes it responsive.
2. navbar-right – This aligns your menu items at the right side.
3. active – This highlights the current item. You still have to customize it to highlight which and when the item will be highlighted.

If you leave out navbar-right – Your menu items will be at the right side.

4. Let’s make your navigation responsive.

Add these code before the div of your menu items.

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed btn btn-default" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#header" id="logo">Yuri</a>
</div>

1. Those three span elements with the class of icon-bar will look like a menu icon.

And it’ll work as a button because you put it inside the button element.

2. Your button element has several classes.

1. btn – Bootstrap gives these basic styles for your buttons.
2. btn-default – It changes the color of your button. You can also use btn-primary, btn-warning and others. Look into their website for more.
3. data-toggle, data-target – This targets which element will be collapsible. These attributes targets your navigation to collapse when the view port is reduced.
4. aria-expanded, aria-controls – These classes are for devices like screen readers and other similar assistive technologies. For more info, click here.
5. collapsed – It collapses the element.

3. Add your brand.

I don’t know why Bootstrap designed it like you’ll add the brand after the button. However, that’s the way it works.

5. Change your selected active menu item.

Use this code to change the selected active menu item

$(function() {
$("#navbar li").click(function() {
$("#navbar li").removeClass("active");
$(this).addClass("active");
});

});

Using a jQuery selector, it selects all of your list items in that particular id. And when any of your list items gets clicked, it will execute a function.

Each list item will remove the class, “active”, if there is one.

Then, the particular object that is clicked will add a class of active.

 

So, there you go! You’ve just made your navigation responsive using Bootstrap.

You can click here to see the finished code.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin