Menu live example and documentation
<header> <div class="navbar navbar-default" role="navigation"> <div class="navbar navbar-main"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" /></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <span class="caret"></span></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><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <div class="nav navbar-nav navbar-right"> <form class="navbar-form" role="search"> <!--SEARCH A--> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-sm" type="submit">GO</button> </span> </div> <!--SEARCH B--> <div class="search-box-menu"> <div class="search-box scrolldown"> <input type="text" class="form-control" placeholder="Search for..."> </div> <button type="button" class="btn btn-default btn-search"> <span class="fa fa-search"></span> </button> </div> </form> <!--SOCIAL ICONS--> <div class="btn-group navbar-social"> <div class="btn-group social-group"> <a target="_blank" href="#"><i class="fa fa-facebook"></i></a> <a target="_blank" href="#"><i class="fa fa-twitter"></i></a> <a target="_blank" href="#"><i class="fa fa-instagram"></i></a> <a target="_blank" href="#"><i class="fa fa-youtube"></i></a> </div> </div> <!--CUSTOM AREA--> <div class="custom-area"> <img src="images/custom-area.png" /> </div> <!--SHOPPING CART--> <div class="shop-menu-cnt"> <i class="fa fa-shopping-cart"></i> <div class="shop-menu"> <ul class="shop-cart"> <li class="cart-item"> <img src="http://www.framework-y.com/images/thumb.png" alt=""> <div class="cart-content"> <h5>Wood Airplain</h5> <span class="cart-quantity"> 1 x 299.00$ </span> </div> </li> </ul> <p class="cart-total"> Subtotal: <span>$299.00</span> </p> <p class="cart-buttons"> <a href="#" class="btn btn-xs cart-view">View Cart</a> <a href="#" class="btn btn-xs cart-checkout">Checkout</a> </p> </div> </div> <!--LANGUAGE MENU--> <ul class="nav navbar-nav lan-menu"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="images/en.png" />EN <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><img src="images/it.png" />IT</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> </header>