HTML example:
<!--
Additional Classes:
.nk-header-opaque
-->
<header class="nk-header nk-header-opaque">
<!-- START: Top Contacts -->
<div class="nk-contacts-top">
<div class="container">
<div class="nk-contacts-left">
<ul class="nk-social-links">
<li>
<a class="nk-social-rss" href="#">
<span class="fa fa-rss"></span>
</a>
</li>
<li>
<a class="nk-social-twitch" href="#">
<span class="fa fa-twitch"></span>
</a>
</li>
<li>
<a class="nk-social-steam" href="#">
<span class="fa fa-steam"></span>
</a>
</li>
<li>
<a class="nk-social-facebook" href="#">
<span class="fa fa-facebook"></span>
</a>
</li>
<li>
<a class="nk-social-google-plus" href="#">
<span class="fa fa-google-plus"></span>
</a>
</li>
<li>
<a class="nk-social-twitter" href="https://twitter.com/nkdevv" target="_blank">
<span class="fa fa-twitter"></span>
</a>
</li>
<li>
<a class="nk-social-pinterest" href="#">
<span class="fa fa-pinterest-p"></span>
</a>
</li>
<!-- Additional Social Buttons
<li><a class="nk-social-behance" href="#"><span class="fa fa-behance"></span></a></li>
<li><a class="nk-social-bitbucket" href="#"><span class="fa fa-bitbucket"></span></a></li>
<li><a class="nk-social-dropbox" href="#"><span class="fa fa-dropbox"></span></a></li>
<li><a class="nk-social-dribbble" href="#"><span class="fa fa-dribbble"></span></a></li>
<li><a class="nk-social-deviantart" href="#"><span class="fa fa-deviantart"></span></a></li>
<li><a class="nk-social-flickr" href="#"><span class="fa fa-flickr"></span></a></li>
<li><a class="nk-social-foursquare" href="#"><span class="fa fa-foursquare"></span></a></li>
<li><a class="nk-social-github" href="#"><span class="fa fa-github"></span></a></li>
<li><a class="nk-social-instagram" href="#"><span class="fa fa-instagram"></span></a></li>
<li><a class="nk-social-linkedin" href="#"><span class="fa fa-linkedin"></span></a></li>
<li><a class="nk-social-medium" href="#"><span class="fa fa-medium"></span></a></li>
<li><a class="nk-social-odnoklassniki" href="#"><span class="fa fa-odnoklassniki"></span></a></li>
<li><a class="nk-social-paypal" href="#"><span class="fa fa-paypal"></span></a></li>
<li><a class="nk-social-reddit" href="#"><span class="fa fa-reddit"></span></a></li>
<li><a class="nk-social-skype" href="#"><span class="fa fa-skype"></span></a></li>
<li><a class="nk-social-soundcloud" href="#"><span class="fa fa-soundcloud"></span></a></li>
<li><a class="nk-social-slack" href="#"><span class="fa fa-slack"></span></a></li>
<li><a class="nk-social-tumblr" href="#"><span class="fa fa-tumblr"></span></a></li>
<li><a class="nk-social-vimeo" href="#"><span class="fa fa-vimeo"></span></a></li>
<li><a class="nk-social-vk" href="#"><span class="fa fa-vk"></span></a></li>
<li><a class="nk-social-wordpress" href="#"><span class="fa fa-wordpress"></span></a></li>
<li><a class="nk-social-youtube" href="#"><span class="fa fa-youtube-play"></span></a></li>
-->
</ul>
</div>
<div class="nk-contacts-right">
<ul class="nk-contacts-icons">
<li>
<a href="#" data-toggle="modal" data-target="#modalSearch">
<span class="fa fa-search"></span>
</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#modalLogin">
<span class="fa fa-user"></span>
</a>
</li>
<li>
<span class="nk-cart-toggle">
<span class="fa fa-shopping-cart"></span>
<span class="nk-badge">27</span>
</span>
<div class="nk-cart-dropdown">
<div class="nk-widget-post">
<a href="store-product.html" class="nk-post-image">
<img src="assets/images/product-5-xs.jpg" alt="In all revolutions of">
</a>
<h3 class="nk-post-title">
<a href="#" class="nk-cart-remove-item">
<span class="ion-android-close"></span>
</a>
<a href="store-product.html">In all revolutions of</a>
</h3>
<div class="nk-gap-1"></div>
<div class="nk-product-price">€ 23.00</div>
</div>
<div class="nk-widget-post">
<a href="store-product.html" class="nk-post-image">
<img src="assets/images/product-7-xs.jpg" alt="With what mingled joy">
</a>
<h3 class="nk-post-title">
<a href="#" class="nk-cart-remove-item">
<span class="ion-android-close"></span>
</a>
<a href="store-product.html">With what mingled joy</a>
</h3>
<div class="nk-gap-1"></div>
<div class="nk-product-price">€ 14.00</div>
</div>
<div class="nk-gap-2"></div>
<div class="text-xs-center">
<a href="store-checkout.html" class="nk-btn nk-btn-rounded nk-btn-color-main-1 nk-btn-hover-color-white">Proceed to Checkout</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- END: Top Contacts -->
<!--
START: Navbar
Additional Classes:
.nk-navbar-sticky
.nk-navbar-transparent
.nk-navbar-autohide
-->
<nav class="nk-navbar nk-navbar-top nk-navbar-sticky">
<div class="container">
<div class="nk-nav-table">
<a href="index.html" class="nk-nav-logo">
<img src="assets/images/logo.png" alt="GoodGames" width="199">
</a>
<ul class="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
<li class=" nk-drop-item">
<a href="elements.html">
Features
</a>
<ul class="dropdown">
<li>
<a href="elements.html">
Elements (Shortcodes)
</a>
</li>
<li class=" nk-drop-item">
<a href="forum.html">
Forum
</a>
<ul class="dropdown">
<li>
<a href="forum.html">
Forum
</a>
</li>
<li>
<a href="forum-topics.html">
Topics
</a>
</li>
<li>
<a href="forum-single-topic.html">
Single Topic
</a>
</li>
</ul>
</li>
<li>
<a href="widgets.html">
Widgets
</a>
</li>
<li>
<a href="coming-soon.html">
Coming Soon
</a>
</li>
<li>
<a href="offline.html">
Offline
</a>
</li>
<li>
<a href="404.html">
404
</a>
</li>
<li>
<a href="documentation.html">
Documentation
</a>
</li>
</ul>
</li>
<li class=" nk-drop-item">
<a href="blog-list.html">
Blog
</a>
<ul class="dropdown">
<li>
<a href="news.html">
News
</a>
</li>
<li class=" nk-drop-item">
<a href="blog-grid.html">
Blog With Sidebar
</a>
<ul class="dropdown">
<li>
<a href="blog-grid.html">
Blog Grid
</a>
</li>
<li>
<a href="blog-list.html">
Blog List
</a>
</li>
</ul>
</li>
<li>
<a href="blog-fullwidth.html">
Blog Fullwidth
</a>
</li>
<li>
<a href="blog-article.html">
Blog Article
</a>
</li>
</ul>
</li>
<li>
<a href="gallery.html">
Gallery
</a>
</li>
<li class=" nk-drop-item">
<a href="tournaments.html">
Tournaments
</a>
<ul class="dropdown">
<li>
<a href="tournaments.html">
Tournament
</a>
</li>
<li>
<a href="tournaments-teams.html">
Teams
</a>
</li>
<li>
<a href="tournaments-teammate.html">
Teammate
</a>
</li>
</ul>
</li>
<li class=" nk-drop-item">
<a href="store.html">
Store
</a>
<ul class="dropdown">
<li>
<a href="store.html">
Store
</a>
</li>
<li>
<a href="store-product.html">
Product
</a>
</li>
<li>
<a href="store-catalog.html">
Catalog
</a>
</li>
<li>
<a href="store-catalog-alt.html">
Catalog Alt
</a>
</li>
<li>
<a href="store-checkout.html">
Checkout
</a>
</li>
<li>
<a href="store-cart.html">
Cart
</a>
</li>
</ul>
</li>
</ul>
<ul class="nk-nav nk-nav-right nk-nav-icons">
<li class="single-icon hidden-lg-up">
<a href="#" class="no-link-effect" data-nav-toggle="#nk-nav-mobile">
<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>
Additional classes:
- Navigation Header:
.nk-header-opaque– opaque background color for navbar and top contacts.
- Navigation:
.nk-navbar-sticky– sticky navbar on page scroll;.nk-navbar-transparent– transparent background color;.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;