HTML example:

<!--
    START: Nav Header

    Additional Classes:
        .nk-header-left
        .nk-header-opaque
-->
<header class="nk-header nk-header-left nk-header-opaque">
    <!--
        START: Navbar

        Additional Classes:
            .nk-navbar-dark
    -->
    <nav class="nk-navbar nk-navbar-cont d-none d-lg-flex">
        <a href="index.html" class="nk-nav-logo">
            <img src="assets/images/logo-2.svg" alt="" width="19" class="nk-nav-logo-img-dark">
            <img src="assets/images/logo-2-light.svg" alt="" width="19" class="nk-nav-logo-img-light">
        </a>
        <a href="#" class="nk-navbar-left-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 class="nk-social">
            <ul>
                <li><a class="nk-social-dribbble" href="https://dribbble.com/"><span><span class="nk-social-front fa fa-dribbble"></span><span class="nk-social-back fa fa-dribbble"></span></span></a></li>
                <li><a class="nk-social-instagram" href="https://www.instagram.com/"><span><span class="nk-social-front fa fa-instagram"></span><span class="nk-social-back fa fa-instagram"></span></span></a></li>
                <li><a class="nk-social-behance" href="https://behance.com/"><span><span class="nk-social-front fa fa-behance"></span><span class="nk-social-back fa fa-behance"></span></span></a></li>
            </ul>
        </div>
    </nav>
    <!-- END: Navbar -->

    <!--
        START: Navbar Left

        Additional Classes:
            .nk-navbar-lg
            .nk-navbar-overlay-content
            .nk-navbar-dark
            .nk-navbar-items-effect-1
            .nk-navbar-drop-effect-1
            .nk-navbar-drop-effect-2
    -->
    <div class="nk-navbar nk-navbar-left nk-navbar-lg nk-navbar-overlay-content nk-navbar-drop-effect-2 d-none d-lg-block">
        <div class="nano">
            <div class="nano-content">
                <div class="nk-nav-table">
                    <div class="nk-nav-row nk-nav-row-full nk-nav-row-center">
                        <ul class="nk-nav" data-nav-mobile="#nk-nav-mobile">
                            <li>
                                <a href="demo-minimal-split.html">
                                    Home
                                    
                                </a>
                            </li>
                            ...
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Navbar Left -->

    <!--
        START: Navbar

        Will be shown on small screens

        Additional Classes:
            .nk-navbar-lg
            .nk-navbar-sticky
            .nk-navbar-autohide
            .nk-navbar-transparent
            .nk-navbar-transparent-always
            .nk-navbar-white-text-on-top
            .nk-navbar-dark
    -->
    <nav class="nk-navbar nk-navbar-top d-lg-none">
        <div class="container">
            <div class="nk-nav-table">
                <a href="index.html" class="nk-nav-logo">
                    <img src="assets/images/logo-2.svg" alt="" width="19" class="nk-nav-logo-img-dark">
                    <img src="assets/images/logo-2-light.svg" alt="" width="19" class="nk-nav-logo-img-light">
                </a>
                <ul class="nk-nav nk-nav-right nk-nav-icons">
                    <li class="single-icon">
                        <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-left – set navigation from top to left of the screen;
  • .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;
  • .nk-navbar-transparent – transparent background color;
  • .nk-navbar-transparent-always – transparent background color also after stick;
  • .nk-navbar-white-text-on-top – white text when menu on the top of the page (not sticky);
  • .nk-navbar-dark – dark style navbar;