HTML example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!-- START: Fullscreen Navbar Additional Classes: .nk-navbar-align-center .nk-navbar-align-right --> <nav class="nk-navbar nk-navbar-full nk-navbar-align-center" id="nk-full"> <div class="nk-navbar-bg"> <div class="bg-image" style="background-image: url('assets/images/bg-menu.jpg')"></div> </div> <div class="nk-nav-table"> <div class="nk-nav-row"> <div class="container"> <div class="nk-nav-header"> <div class="nk-nav-logo"> <a href="index.html" class="nk-nav-logo"> <img src="assets/images/logo-light.svg" alt="" width="85"> </a> </div> <div class="nk-nav-close nk-navbar-full-toggle"> <span class="nk-icon-close"></span> </div> </div> </div> </div> <div class="nk-nav-row-full nk-nav-row"> <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"> <li class="active nk-drop-item"> <a href="home-1.html">Home</a> </li> ... </ul> </div> </div> </div> </div> </div> <div class="nk-nav-row"> <div class="container"> <div class="nk-nav-social"> <ul> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul> </div> </div> </div> </div> </nav> <!-- END: Fullscreen Navbar --> |
Additional classes:
.nk-navbar-align-center– align items to the center;.nk-navbar-align-right– align items to the right;
Toggle button HTML example:
|
1 2 3 4 5 6 7 |
<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> |