Category Archives: Bootstrap

Responsive NavBars with Bootstrap

Creating responsive navigation can be painful. But with bootstrap, we can get something that looks nice and clean knocked out fairly quickly. In this post, I will walk you through the basics of getting a responsive navbar up and running. 

 

First things first, lets get some nav items in a list. 

 

<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact Us</li>
        <li>Login</li>
    </ul>
</body>

Looking in the browser, it should look something like this… 

Screen Shot 2014 10 10 at 9 18 38 AM

 

Ok, not super awesome… But with just a few tags, this will start to look good…

Start by dropping bootstrap into your project. I use http://bower.io/ to manage all of my web dependancies, but you can get it from http://getbootstrap.com/

Now we include the bootstrap.css in our project. Your href will look different than mine….

<head lang=”en”>
<meta charset=”UTF-8″>
<title>BootStrap</title>
<link rel=”stylesheet” type=”text/css” href=”bower_components/bootstrap/dist/css/bootstrap.css”>
</head>

Your page should change slightly now due to different fonts from the css but for the most part its the same. 

Screen Shot 2014 10 10 at 9 37 22 AM

Now is where the magic happens. We are going to use some class attributes to set the whole thing up as a navbar. First we wrap the whole thing in a div with a class of “navbar”. We add in a class of navbar-default to add a little theme to it. You could use navbar-inverse instead to set a different feel.

The navbar will look for items with a “nav” and “navbar-nav” classes and style them appropriately, so we add those tags to the <ul>, In order for any of this to work… your list items must be links… So add that in too. It should look like this… 

<div class=”navbar navbar-default”>
    <ul class=”nav navbar-nav”>
        <li><a href=”#”>Home</a></li>
        <li><a href=”#”>About</a></li>
        <li><a href=”#”>Contact Us</a></li>
        <li><a href=”#”>Login</a></li>
    </ul>
</div>

The results would be pretty dramatic…

Screen Shot 2014 10 10 at 10 35 45 AM

Ok, don’t get too excited yet, we still have to make this thing responsive.  We start by creating a button with three bars… That seems to be the current “Click me, I am a menu” standard.  We are going to use the class “navbar-toggle” to have it only show up when your screen is small. You will have to shrink your browser size to see it. Add it in under your div, but before your <ul> like this…

<div class=”navbar navbar-default”>    
    <button type=”button” class=”navbar-toggle” >
        <span class=”icon-bar”></span>
        <span class=”icon-bar”></span>
        <span class=”icon-bar”></span>
    </button>
<ul class=”nav navbar-nav”>

….

Now, when your browser is small, it will look like this.. 

 

Screen Shot 2014 10 10 at 10 57 29 AM

Thats great and all, but we want it to replace the menu, not just appear, so now we have to break out the navbar-collapse class. create a new <div> with the class navbar-collapse, collapse,  and an id of navBarCollapse )the id can be anything you want… and move the list into that. We also add a “data-toggle” tag to the button and a “data-target” that points to the id of the list items.. It should now look like this.. 

<div class=”navbar navbar-default”>
    <button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#navBarCollapse”>
        <span class=”icon-bar”></span>
        <span class=”icon-bar”></span>
        <span class=”icon-bar”></span>
    </button>

</div>

<div class=”navbar-collapse collapse” id=“navBarCollapse”>
    <ul class=”nav navbar-nav”>
        <li><a href=”#”>Home</a></li>
        <li><a href=”#”>About</a></li>
        <li><a href=”#”>Contact Us</a></li>
        <li><a href=”#”>Login</a></li>
    </ul>
</div>

 

Now, we need to be sure we pull in the bootstrap scripts and add jquery to make the drop downs work. 

<script src=”bower_components/jquery/dist/jquery.js”></script>
<script src=”bower_components/bootstrap/dist/js/bootstrap.js”></script>

When clicked, it should look like this..

.Screen Shot 2014 10 10 at 10 57 29 AM

That’s it. You should now have a fully responsive navbar… Let me know what you think.