HTML example:
<!-- START: Nav Header Additional Classes: .nk-header-left .nk-header-opaque --> <header class="nk-header nk-header-opaque"> <!-- START: Navbar Additional Classes: .nk-navbar-items-collapsed .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"> <div class="container"> <div class="nk-nav-table"> <a href="index.html" class="nk-nav-logo"> <img src="assets/images/logo.svg" alt="" width="70" class="nk-nav-logo-img-dark"> <img src="assets/images/logo-light.svg" alt="" width="70" class="nk-nav-logo-img-light"> </a> <ul class="nk-nav nk-nav-right d-none d-lg-block " data-nav-mobile="#nk-nav-mobile"> <li> <a href="demo-minimal-split.html"> Demos </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-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;