"Navbar example"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">WebApp</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav pull-right"> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div>

Related: See More


Questions / Comments:

it is not working exactly . what should i do

nancy () - 5 years ago - Reply 0


Very cool, thank you. It works fine on Chrome, but I'm having trouble with the snippet on IE 9. Any suggestions?

Andre L () - 5 years ago - Reply 0


This is AWESOME! Is there a relatively easy way to change the navbar color as well with this, or the height of the bar?

For some reason, though the same height as my normal bootstrap navbar, replacing mine with this kicks my background logo image down. Very weird..

Thomas O'Hearn () - 5 years ago - Reply 0


Doesn't work for me. Should I also add some jQuery?

Jaspur NL () - 6 years ago - Reply 0


All js you need is jquery.min.js and bootstrap.min.js ( Or, bootstrap.js ). Copy and paste the code, and stay cool! >v<

K. () - 6 years ago - Reply 1


how to add the js files??

biks () - 5 years ago - Reply 0


Are you using Bootstrap CSS and JS ?

maxsurguy () - 6 years ago - Reply 0


Bootstrap and this is so cool!!

Adeel Ahmed () - 6 years ago - Reply 0