Main Navigation

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;
Was this page helpful?