Mobile navigation items will be created automatically from main navigation.
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 |
<!-- START: Navbar Mobile Additional Classes: .nk-navbar-align-center .nk-navbar-align-right --> <nav class="nk-navbar nk-navbar-full nk-navbar-align-center" id="nk-nav-mobile"> <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 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> </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: Navbar Mobile --> |
Additional classes:
.nk-navbar-align-center– center align menu items;.nk-navbar-align-right– right align menu items;
Toggle button HTML example:
|
1 2 3 4 5 6 7 8 9 |
<div class="hidden-lg-up"> <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> |