Menu component

Menu documentation

Main settings

Name Type Description
Icons Mixed You can change the icons by edit <i class="fa fa-icon-name"></i> codes.
Icons are a feature of Font Awesome. Complete icons list here
Hide on scroll CSS class To hide a menu section on page scroll add class scroll-hide to object you want to hide. Scroll hide is a feature of components - base.
Complete documenteation here
Show on scroll CSS class To show a menu section on page scroll add class show-hide to object you want to hide. Scroll show is a feature of components - base.
Complete documenteation here
Scroll class change CSS class You can change CSS classes of menu on page scroll. Scroll class change is a feature of components - base. Complete documenteation here
Right menu CSS class To move menu on right position add class navbar-right to ul menu.
Example:
<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    ...
</ul>
Menu animations HTML Add attribute data-menu-anima="animation-name" to header object. Example: <header data-menu-anima="fade-bottom"> ... </header>.
Animations list available on animation page.

DEMO MENU ANIMATIONS
Plugin dependency

This feature require Animations component (../css/animations.css)

Animations documentation here
Active menu item CSS class To set te current active item add classes current-active active to li menu item.
One-page scroll menu CSS class To set a one-page menu that scroll on differents areas of the same page add class one-page-menu to menu object. Example: <ul class="nav navbar-nav one-page-menu"> ... </ul>.
Scroll spy Mixed Scroll spy automatically update links in a navigation list based on scroll position. Add attributes data-spy="scroll" data-target="#menu-id" to content container, add id="menu-id" to menu object. To enabled scroll spy to all page insert the code in the body. Attribute data-offset="123" set the top offset in px for scroll position. Change it until you get perfect position detection.

Example:
<body data-spy="scroll" data-target="#menu-demo" data-offset="250">
    ...
    <aside id="menu-demo" class="sidebar">
        ...
    </aside>
    ... 
</body>

Complete documentation and external resources

Fixed menu CSS class To set a always visible and fixed on top menu add class fixed-top to header object and class navbar-fixed-top to menu obejct.

Example:
<header class="fixed-top"> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
        ... 
    </div> 
</header>
Side menu Mixed Side menu need you add class side-menu-container to body object. Example: <body class="side-menu-container"> ... </body>.
Side menu use plugin MetisMenu.

Complete documentation and external resources

Full width size CSS class To set a full width horizontal menu add class wide-area to navbar object. Example: <header><div class="navbar navbar-default wide-area" role="navigation"> ... </div></header>.
Menu height HTML attribute To set the header height add attribute data-menu-height to header object. Example: <header data-menu-height="150"> ... </header>.
Retina logo HTML Replace the logo image of the header with this two images:
<img class="logo-default" src="" alt="" />
<img class="logo-retina" src="" alt="" />

Usage

    <header class="demo">
    <div class="navbar navbar-default" role="navigation">
        <!--NAVBAR MAIN-->
        <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.png" alt="logo" /></a>
                </div>
                <div class="collapse navbar-collapse">
                    <!-- MAIN MENU -->
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                    </ul>
                    <!-- RIGHT AREA -->
                    <div class="nav navbar-nav navbar-right">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
    <header class="demo">
    <div class="navbar navbar-default" role="navigation">
        <!--NAVBAR MINI-->
        <div class="navbar-mini scroll-hide">
            <div class="container">
                <!-- LEFT AREA -->
                <div class="nav navbar-nav navbar-left">
                    ...
                </div>
                <!-- RIGHT AREA -->
                <div class="nav navbar-nav navbar-right">
                    ...
                </div>
            </div>
        </div>
        <!--NAVBAR BIG-->
        <div class="navbar navbar-big scroll-hide">
            <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="logo.png" alt="logo" /></a>
                </div>
                <div class="collapse navbar-collapse">
                    <!-- MAIN MENU -->
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                    </ul>
                    <!-- RIGHT AREA -->
                    <div class="nav navbar-nav navbar-right">
                        ...
                    </div>
                </div>
            </div>
        </div>
        <!--NAVBAR MAIN-->
        <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.png" alt="logo" /></a>
                </div>
                <div class="collapse navbar-collapse">
                    <!-- MAIN MENU -->
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                    </ul>
                    <!-- RIGHT AREA -->
                    <div class="nav navbar-nav navbar-right">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

Menu sections and elements

Menu is a object composed of differents section, features and elements. Go to menu documentation section for more details.
Menu sections documentation

Menu dropdows

Menu dropdows can be many. Go to menu documentation dropdown for more details.
Menu dropdowns documentation