<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Example #1 .navbar-fixed-top .navbar-default --> <nav class="navbar navbar-fixed-top navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#example-left" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-right" aria-expanded="false"> <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="#">Brand</a> </div> <!-- .navbar-collapse left-menu--> <div class="collapse navbar-collapse" data-parent="#accordion" id="example-left"> <ul class="nav navbar-nav"> <li><a href="#">Left 1</a></li> <li><a href="#">Left 1</a></li> </ul> </div> <!-- .navbar-collapse Right menu--> <div class="collapse navbar-collapse navbar-right" data-parent="#accordion" id="example-right"> <ul class="nav navbar-nav"> <li><a href="#">Right 1</a></li> <li><a href="#">Right 2</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="col-md-12 text-center"> <h2>Navbar with 2 collapses menu v1.0</h2> <p>This navbar has 2 collapses, one to the left and one to the right, each with its own toggle-button.</p> <p>no java or jquery, only CSS <small>(with CSS explained)</small></p> </div> </div>

/* required for navbar-fixed-top */ body { padding-top: 70px } /* Correct left margin */ .navbar-header{ padding-left: 15px } /* correct navbar float */ @media (min-width: 768px) { .navbar-collapse.collapse { display: block!important; float:left } }