Main Navigation [left]

HTML Example:

<!--
    START: Navbar

    Additional Classes:
        .nk-navbar-lg
        .nk-navbar-align-center
        .nk-navbar-align-right
        .nk-navbar-overlay-content
        .nk-navbar-light
-->
<nav class="nk-navbar nk-navbar-side nk-navbar-left nk-navbar-lg nk-navbar-align-left nk-navbar-overlay-content" id="nk-navbar-left">
    <div class="nano">
        <div class="nano-content">
            <div class="nk-nav-table">
                <div class="nk-nav-row">
                    <a href="#" class="nk-nav-logo">
                        <img src="assets/images/logo.png" alt="" width="100">
                    </a>

                    <ul class="nk-nav-icons">
                        <li>
                            <a href="#" class="no-link-effect">
                                <span class="ion-bag"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nk-share-toggle no-link-effect">
                                <span class="ion-android-share-alt"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nk-search-toggle no-link-effect">
                                <span class="nk-icon-search"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--
                    START: Navigation

                    Additional Classes:
                        .nk-nav-row-top
                        .nk-nav-row-center
                        .nk-nav-row-bottom
                -->
                <div class="nk-nav-row nk-nav-row-full nk-nav-row-top">
                    <ul class="nk-nav" data-nav-mobile="#nk-nav-mobile">
                        ...
                    </ul>
                </div>
                <!--
                    END: Navigation
                -->
                <div class="nk-nav-row">
                    <div class="nk-nav-social">
                        <footer>
                            <a href="http://nkdev.info" target="_blank">nK</a> © 2016. All rights reserved
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<!-- END: Navbar -->

Additional classes: .nk-navbar-lg .nk-navbar-align-center .nk-navbar-align-right .nk-navbar-overlay-content .nk-navbar-light

  • .nk-navbar-light – light background color;
  • .nk-navbar-lg – large size;
  • .nk-navbar-align-center – text align center;
  • .nk-navbar-align-right – text align right;
  • .nk-navbar-overlay-content – show content dark overlay when opened navigation;
Was this page helpful?