HTML Example:
<!--
START: Navbar
Additional Classes:
.nk-navbar-lg
.nk-navbar-align-center
.nk-navbar-align-right
.nk-navbar-overlay-content
.nk-navbar-light
-->
<nav class="nk-navbar nk-navbar-side nk-navbar-left nk-navbar-lg nk-navbar-align-left nk-navbar-overlay-content" id="nk-navbar-left">
<div class="nano">
<div class="nano-content">
<div class="nk-nav-table">
<div class="nk-nav-row">
<a href="#" class="nk-nav-logo">
<img src="assets/images/logo.png" alt="" width="100">
</a>
<ul class="nk-nav-icons">
<li>
<a href="#" class="no-link-effect">
<span class="ion-bag"></span>
</a>
</li>
<li>
<a href="#" class="nk-share-toggle no-link-effect">
<span class="ion-android-share-alt"></span>
</a>
</li>
<li>
<a href="#" class="nk-search-toggle no-link-effect">
<span class="nk-icon-search"></span>
</a>
</li>
</ul>
</div>
<!--
START: Navigation
Additional Classes:
.nk-nav-row-top
.nk-nav-row-center
.nk-nav-row-bottom
-->
<div class="nk-nav-row nk-nav-row-full nk-nav-row-top">
<ul class="nk-nav" data-nav-mobile="#nk-nav-mobile">
...
</ul>
</div>
<!--
END: Navigation
-->
<div class="nk-nav-row">
<div class="nk-nav-social">
<footer>
<a href="http://nkdev.info" target="_blank">nK</a> © 2016. All rights reserved
</footer>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- END: Navbar -->
Additional classes: .nk-navbar-lg .nk-navbar-align-center .nk-navbar-align-right .nk-navbar-overlay-content .nk-navbar-light
.nk-navbar-light– light background color;.nk-navbar-lg– large size;.nk-navbar-align-center– text align center;.nk-navbar-align-right– text align right;.nk-navbar-overlay-content– show content dark overlay when opened navigation;
