Responsive Navigation Menu using Twitter Bootstrap 3.0




In one of my posts I had explained how to code a responsive navigation menu that changes its display according to device screen size using Twitter Bootstrap. I used Bootstrap version 2.0. In the subsequent version releases of Bootstrap, there are few changes made in the navbar css classes and my previous post on the same topic does not work if you had migrated or working with version 3 plus of Bootstrap.

This tutorial explains how to create responsive navigation menu Twitter Bootstrap 3.2.0

1. Download Bootstrap 3.2.0 from here. Download latest version of jquery from here.

2. Unzip the downloaded files and create a new html file in the same directory. 


I had placed jquery library in js folder.

3. Copy and paste below code in the html file.

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Navigation Menu using Twitter Bootstrap 3">
    <meta name="author" content="Priyadarshini">
    

    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <!-- Static navbar -->
      <div class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="navbar-collapse collapse" style="height: 1px;">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="">Pricing</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Latest Products</a></li>
                <li><a href="#">Popular Products</a></li>
                </ul>
              </li>          
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Personal Membership</a></li>
                  <li><a href="#">Premium Membership</a></li>
                </ul>
              </li>
              <li><a href="#">Offers</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script> 

</body></html>


In the previous version, to achieve responsive web design we had to include boostrap.responsive.css file. But now it is all wrapped up in a single css file (bootstrap.min.css).

That is all! Open the html file in a browser and resize it to see how the navigation menu displays for various screen sizes.




Please leave your comments and queries about this post in the comment sections and stay subscribed. Thanks for reading!!

Subscribe to GET LATEST ARTICLES!


Related

Responsive Design 8578378858088139343

Post a Comment

  1. I'm using this menu

    I use sub menu with target iframe and linking to cross domain

    After click the menu not close at all.... how to fix it?

    syabiz[at]gmail.com

    thanks

    ReplyDelete
  2. how moronic that copying and pasting the code is impossible because you included the line numbers? Moving on...

    ReplyDelete
    Replies
    1. You call it moronic??!! Funny ... You can see few icons on the top right corner of the code, one of which opens the code in a clean window for you to copy it easily.

      Delete
  3. good to start with bootstrap menu...thanks..

    ReplyDelete

emo-but-icon

SUBSCRIBE


item