Mobile Navigation

 

Mobile navigation items will be created automatically from the main navigation.

HTML example:

<!--
    START: Navbar Mobile

    Additional Classes:
        .nk-navbar-left-side
        .nk-navbar-right-side
        .nk-navbar-lg
        .nk-navbar-overlay-content
-->
<nav class="nk-navbar nk-navbar-full nk-navbar-align-center nk-navbar-dark nk-navbar-drop-effect-1" id="nk-nav-mobile">
    <div class="container-fluid">
        <div class="nk-nav-table">
            <div class="nk-nav-logo">
                <a href="index.html" class="nk-nav-logo">
                    <img src="assets/images/logo.svg" alt="" width="105">
                    <img src="assets/images/logo-light.svg" alt="" width="105">
                </a>
            </div>
            <ul class="nk-nav nk-nav-left d-none d-lg-table-cell" data-nav-mobile="#nk-nav-mobile">
                <li class="active">
                   <a href="index.html">
                       Main page
                   </a>
                </li>
                ...
            </ul>
        </div>
    </div>
</nav>

<div id="nk-nav-mobile" class="nk-navbar nk-navbar-side nk-navbar-right-side nk-navbar-overlay-content d-lg-none">
    <div class="nano">
        <div class="nano-content">
            <a href="index.html" class="nk-nav-logo">
                <img src="assets/images/logo.svg" alt="" width="120">
            </a>
            <div class="nk-navbar-mobile-content">
                <ul class="nk-nav">
                    <!-- Here will be inserted menu from [data-mobile-menu="#nk-nav-mobile"] -->
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Navbar Mobile -->

Additional classes:

  • .nk-navbar-align-center – center align menu items;
  • .nk-navbar-align-right – right align menu items;
  • .nk-navbar-items-effect-1 – alternate items hover effect;
  • .nk-navbar-drop-effect-1 – 1 dropdown effect;
  • .nk-navbar-drop-effect-2 – 2 dropdown effect;

Toggle button HTML example:

<div class="d-lg-none">
    <a href="#" class="nk-navbar-full-toggle">
        <span class="nk-icon-burger">
            <span class="nk-t-1"></span>
            <span class="nk-t-2"></span>
            <span class="nk-t-3"></span>
        </span>
    </a>
</div>
Was this page helpful?