Main Navigation [top]

 

HTML example:

<!--
    START: Nav Header

    Additional Classes:
        .nk-header-opaque
-->
<header class="nk-header nk-header-opaque">

    <!--
        START: Navbar

        Additional Classes:
            .nk-navbar-sticky
            .nk-navbar-autohide
            .nk-navar-fixed
    -->
    <nav class="nk-navbar nk-navbar-top">
        <div class="container-fluid">
            <div class="nk-nav-table">
                
                <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>
                
                <ul class="nk-nav nk-nav-right d-none d-lg-block " data-nav-mobile="#nk-nav-mobile">
                    <li>
                        <a href="index.html">
                            Main page
                        </a>
                    </li>
                    ...
                </ul>
                
                <ul class="nk-nav nk-nav-right nk-nav-icons">
                    <li class="single-icon 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>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- END: Navbar -->

</header>
<!-- END: Nav Header -->
  • Navigation:
    • .nk-header-opaque – opaque navigation;
    • .nk-navbar-items-collapsed – collapsed menu items;
    • .nk-navbar-lg – large height of menu;
    • .nk-navbar-sticky – sticky navbar on page scroll;
    • .nk-navbar-autohide – autohide navigation on page scroll down. Will show automatically when you scroll to top or when reaching the end of the page;
Was this page helpful?