Menu live example
<header class="fixed-top scroll-change"> <div class="navbar navbar-default icon-menu navbar-fixed-top" 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-big.png" alt="logo"></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-hand-o-down"></i><span>Dropdown</span></a> <ul class="dropdown-menu multi-level"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </li> <li><a href="#"><i class="fa fa-users"></i><span>Team</span></a></li> <li><a href="#"><i class="fa fa-connectdevelop"></i><span>Contacts</span></a></li> </ul> <div class="nav navbar-nav navbar-right"> <div class="btn-group navbar-social"> <div class="btn-group social-group"> <a target="_blank" href="#"><i class="fa fa-facebook-square"></i></a> <a target="_blank" href="#"><i class="fa fa-twitter-square"></i></a> <a target="_blank" href="#"><i class="fa fa-instagram"></i></a> <a target="_blank" href="#"><i class="fa fa-youtube-square"></i></a> </div> </div> <form class="navbar-form" role="search"> <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> </form> </div> </div> </div> </div> </div> </header>
Name | Type | Description |
---|---|---|
Icons | Mixed |
You can change the icons by edit <i class="fa fa-icon-name"></i> items of menu <ul class="nav navbar-nav"> ... </ul> ,
replace fa-icon-name with the class icon you want.
You can use 3 icons family sets: Font Awesome, Icon Mind Solid, Icons Mind Line. Click the buttons below for the complete icons lists.
Font Awesome icons list Icons Mind icons list |
Resize on scroll | CSS class |
Add classes fixed-top scroll-change to header object and class navbar-fixed-top to navbar object.
Use the CSS to adjust the margins
|