Menu live example and documentation
<header class="fixed-top scroll-change">
<div class="navbar navbar-default icon-menu icon-menu-top navbar-fixed-top" role="navigation">
<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 icon-top">
<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="#" aria-expanded="false"><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>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Single item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-users"></i><span>Team</span></a></li>
<li><a href="#"><i class="fa fa-question"></i><span>About</span></a></li>
<li><a href="#"><i class="fa fa-book"></i><span>Portfolio</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>
</header>
| Name | Type | Description |
|---|---|---|
| Top icons menu | CSS class |
Menu top icons is a variant of Menu icon, to convert it to top icon version add class icon-top to ul menu object and class icon-menu-top to main menu container. Example: <div class="navbar navbar-default icon-menu icon-menu-top navbar-fixed-top" role="navigation"> ... <ul class="nav navbar-nav icon-top"> ... </ul> ... </div>.
|
| 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.
Logo image must contain top and bottom margins, not use CSS for set correct position of logo but add space directly in PNG image file. |