Menu icons

Menu live example

Back to menu documentation Top icons menu

Usage

<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> 

Main settings

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