<!-- /Top Bar -->

<!--
    AVAILABLE HEADER CLASSES

    Default nav height: 96px
    .header-md 		= 70px nav height
    .header-sm 		= 60px nav height

    .noborder 		= remove bottom border (only with transparent use)
    .transparent	= transparent header
    .translucent	= translucent header
    .sticky			= sticky header
    .static			= static header
    .dark			= dark header
    .bottom			= header on bottom

    shadow-before-1 = shadow 1 header top
    shadow-after-1 	= shadow 1 header bottom
    shadow-before-2 = shadow 2 header top
    shadow-after-2 	= shadow 2 header bottom
    shadow-before-3 = shadow 3 header top
    shadow-after-3 	= shadow 3 header bottom

    .clearfix		= required for mobile menu, do not remove!

    Example Usage:  class="clearfix sticky header-sm transparent noborder"
-->
<div id="header" class="sticky clearfix">

    <!-- SEARCH HEADER -->
    <div class="search-box over-header">
        <a id="closeSearch" href="#" class="glyphicon glyphicon-remove"></a>

        <form action="<?php echo base_url()?>page-search-result-1.html" method="get">
            <input type="text" class="form-control" placeholder="SEARCH"/>
        </form>
    </div>
    <!-- /SEARCH HEADER -->


    <!-- TOP NAV -->
    <header id="topNav">
        <div class="container">

            <!-- Mobile Menu Button -->
            <button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
                <i class="fa fa-bars"></i>
            </button>

            <!-- BUTTONS -->
            <ul class="pull-right nav nav-pills nav-second-main">

                <!-- SEARCH -->
                <li class="search">
                    <a href="javascript:;">
                        <i class="fa fa-search"></i>
                    </a>
                </li>
                <!-- /SEARCH -->


                <!-- QUICK SHOP CART -->
                <li class="quick-cart">
                    <a href="#">
                        <span class="badge badge-aqua btn-xs badge-corner">2</span>
                        <i class="fa fa-shopping-cart"></i>
                    </a>
                    <div class="quick-cart-box">
                        <h4>Shop Cart</h4>

                        <div class="quick-cart-wrapper">

                            <a href="#"><!-- cart item -->
                                <img src="assets/images/demo/people/300x300/4-min.jpg" width="45" height="45"
                                     alt=""/>
                                <h6><span>2x</span> RED BAG WITH HUGE POCKETS</h6>
                                <small>$37.21</small>
                            </a><!-- /cart item -->

                            <a href="#"><!-- cart item -->
                                <img src="assets/images/demo/people/300x300/5-min.jpg" width="45" height="45"
                                     alt=""/>
                                <h6><span>2x</span> THIS IS A VERY LONG TEXT AND WILL BE TRUNCATED</h6>
                                <small>$17.18</small>
                            </a><!-- /cart item -->

                            <!-- cart no items example -->
                            <!--
                            <a class="text-center" href="#">
                                <h6>0 ITEMS ON YOUR CART</h6>
                            </a>
                            -->

                        </div>

                        <!-- quick cart footer -->
                        <div class="quick-cart-footer clearfix">
                            <a href="shop-cart.html" class="btn btn-primary btn-xs pull-right">VIEW CART</a>
                            <span class="pull-left"><strong>TOTAL:</strong> $54.39</span>
                        </div>
                        <!-- /quick cart footer -->

                    </div>
                </li>
                <!-- /QUICK SHOP CART -->

            </ul>
            <!-- /BUTTONS -->

            <!-- Logo -->
            <a class="logo pull-left" href="<?php echo base_url()?>index.html">
                <img src="<?php echo base_url()?>assets/images/logo_dark.png" alt=""/>
            </a>

            <!--
                Top Nav

                AVAILABLE CLASSES:
                submenu-dark = dark sub menu
            -->

            <div class="navbar-collapse pull-right nav-main-collapse collapse">
                <nav class="nav-main">

                    <ul id="topMain" class="nav nav-pills nav-main">
                        <?php foreach($lists as $key =>$value){ ?>
                            <li class="<?php echo $value->menu_ref==$active?"active":""?>"><!-- HOME -->
                                <a href="<?php echo base_url().$value->menu_url ?>">
                                    <?php echo $value->menu_name ?>
                                </a>
                            </li>
                        <?php } ?>
                    </ul>
                </nav>
            </div>

        </div>
    </header>
    <!-- /Top Nav -->

</div>