Menu component

Top icons menu


<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>
                <a class="navbar-brand" href="index.html"><img src="images/logo-big.png" alt="logo"></a>
            <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>
                    <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>
                <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>
                    <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>

Main settings

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"><li></li></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 top icons is part of menu component. Complete documentation here