Menu component

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="#" 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>
                            </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-default" 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 class icon you want. Icons are a feature of Font Awesome. Complete icons list here
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.

Menu documentation

Menu big logo is part of menu component. Complete documentation here