<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!-- NAVIGATION --> <div class="navbar navbar-static"> <div class="container"> <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="glyphicon glyphicon-chevron-down"></span> </a> <div class="nav-collapse collase"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav pull-right navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a> <ul class="dropdown-menu" style="padding:12px;"> <form class="form-inline"> <button type="submit" class="btn btn-default pull-right"><i class="glyphicon glyphicon-search"></i></button><input type="text" class="form-control pull-left" placeholder="Search"> </form> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a> <ul class="dropdown-menu"> <li><a href="#">Login</a></li> <li><a href="#">Profile</a></li> <li class="divider"></li> <li><a href="#">About</a></li> </ul> </li> </ul> </div> </div> </div> <!-- NAVIGATION -->