<header class="navbar navbar-fixed-top"><!-- set fixed position by adding class "navbar-fixed-top" -->

    <div class="navbar-inner">

        <!-- logo -->
        <div class="navbar-brand">
            <a href="index.html">
                <img src="assets/images/logo-horizontal.png" alt="" />
            </a>
        </div>


        <!-- main menu -->
        <ul class="navbar-nav">
            <li>
                <a href="index.html">
                    <i class="entypo-gauge"></i>
                    <span>Dashboard</span>
                </a>
                <ul>
                    <li>
                        <a href="index.html">
                            <span>Dashboard 1</span>
                        </a>
                    </li>
                    <li>
                        <a href="dashboard-2.html">
                            <span>Dashboard 2</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="opened active">
                <a href="layout-api.html">
                    <i class="entypo-layout"></i>
                    <span>Layouts</span>
                </a>
                <ul>
                    <li>
                        <a href="layout-api.html">
                            <span>Layout API</span>
                        </a>
                    </li>
                    <li>
                        <a href="layout-collapsed-sidebar.html">
                            <span>Collapsed Sidebar</span>
                        </a>
                    </li>
                    <li>
                        <a href="layout-fixed-sidebar.html">
                            <span>Fixed Sidebar</span>
                        </a>
                    </li>
                    <li>
                        <a href="layout-chat-open.html">
                            <span>Chat Open</span>
                        </a>
                    </li>
                    <li>
                        <a href="layout-horizontal-menu-boxed.html">
                            <span>Horizontal Menu Boxed</span>
                        </a>
                    </li>
                    <li>
                        <a href="layout-horizontal-menu-fluid.html">
                            <span>Horizontal Menu Fluid</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="layout-mixed-menus.html">
                            <span>Mixed Menus</span>
                        </a>
                    </li>
                    <li>
                        <a href="layout-page-transition-fade.html">
                            <span>Page Enter Transitions</span>
                        </a>
                        <ul>
                            <li>
                                <a href="layout-page-transition-fade.html">
                                    <span>Fade Come</span>
                                </a>
                            </li>
                            <li>
                                <a href="layout-page-transition-left-in.html">
                                    <span>Left In</span>
                                </a>
                            </li>
                            <li>
                                <a href="layout-page-transition-right-in.html">
                                    <span>Right In</span>
                                </a>
                            </li>
                            <li>
                                <a href="layout-page-transition-fade-only.html">
                                    <span>Fade Only</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>


            <!-- Search Bar -->
            <li id="search" class="search-input-collapsed">
                <!-- add class "search-input-collapsed" to auto collapse search input -->
                <form method="get" action="">
                    <input type="text" name="q" class="search-input" placeholder="Search something..."/>
                    <button type="submit">
                        <i class="entypo-search"></i>
                    </button>
                </form>
            </li>
        </ul>


        <!-- notifications and other links -->
        <ul class="nav navbar-right pull-right">

            <!-- dropdowns -->
            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                    <i class="entypo-list"></i>
                    <span class="badge badge-info">6</span>
                </a>

                <!-- dropdown menu (tasks) -->
                <ul class="dropdown-menu"></ul>

            </li>

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                    <i class="entypo-mail"></i>
                    <span class="badge badge-secondary">10</span>
                </a>

                <!-- dropdown menu (messages) -->
                <ul class="dropdown-menu"></ul>

            </li>

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                    <i class="entypo-globe"></i>
                    <span class="badge badge-warning">1</span>
                </a>

                <!-- dropdown menu (messages) -->
                <ul class="dropdown-menu"></ul>

            </li>

            <!-- raw links -->
            <li>
                <a href="#">Live Site</a>
            </li>

            <li class="sep"></li>

            <li>
                <a href="extra-login.html">
                    Log Out <i class="entypo-logout right"></i>
                </a>
            </li>


            <!-- mobile only -->
            <li class="visible-xs">

                <!-- open/close menu icon (do not remove if you want to enable menu on mobile devices) -->
                <div class="horizontal-mobile-menu visible-xs">
                    <a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
                        <i class="entypo-menu"></i>
                    </a>
                </div>

            </li>

        </ul>

    </div>

</header>

<div class="sidebar-menu">

    <ul id="main-menu" class="">
        <!-- add class "multiple-expanded" to allow multiple submenus to open -->
        <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
        <li>
            <a href="index.html">
                <i class="entypo-gauge"></i>
                <span>Dashboard</span>
            </a>
            <ul>
                <li>
                    <a href="index.html">
                        <span>Dashboard 1</span>
                    </a>
                </li>
                <li>
                    <a href="dashboard-2.html">
                        <span>Dashboard 2</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="opened active">
            <a href="layout-api.html">
                <i class="entypo-layout"></i>
                <span>Layouts</span>
            </a>
            <ul>
                <li>
                    <a href="layout-api.html">
                        <span>Layout API</span>
                    </a>
                </li>
                <li>
                    <a href="layout-collapsed-sidebar.html">
                        <span>Collapsed Sidebar</span>
                    </a>
                </li>
                <li>
                    <a href="layout-fixed-sidebar.html">
                        <span>Fixed Sidebar</span>
                    </a>
                </li>
                <li>
                    <a href="layout-chat-open.html">
                        <span>Chat Open</span>
                    </a>
                </li>
                <li>
                    <a href="layout-horizontal-menu-boxed.html">
                        <span>Horizontal Menu Boxed</span>
                    </a>
                </li>
                <li>
                    <a href="layout-horizontal-menu-fluid.html">
                        <span>Horizontal Menu Fluid</span>
                    </a>
                </li>
                <li class="active">
                    <a href="layout-mixed-menus.html">
                        <span>Mixed Menus</span>
                    </a>
                </li>
                <li>
                    <a href="layout-page-transition-fade.html">
                        <span>Page Enter Transitions</span>
                    </a>
                    <ul>
                        <li>
                            <a href="layout-page-transition-fade.html">
                                <span>Fade Come</span>
                            </a>
                        </li>
                        <li>
                            <a href="layout-page-transition-left-in.html">
                                <span>Left In</span>
                            </a>
                        </li>
                        <li>
                            <a href="layout-page-transition-right-in.html">
                                <span>Right In</span>
                            </a>
                        </li>
                        <li>
                            <a href="layout-page-transition-fade-only.html">
                                <span>Fade Only</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</div>