HTML example:

<!--
    Additional Classes:
        .nk-header-opaque
-->
<header class="nk-header nk-header-opaque">

    <!--
        START: Top Contacts

        Additional Classes:
            .nk-contacts-top-light
    -->
    <div class="nk-contacts-top">
        <div class="container">
            <div class="nk-contacts-left">
                <div class="nk-navbar">
                    <ul class="nk-nav">
                        <li class="nk-drop-item">
                            <a href="#">Russia</a>
                            <ul class="dropdown">
                                <li><a href="#">Russia</a></li>
                                <li><a href="#">USA</a></li>
                                <li><a href="#">United Kingdom</a></li>
                                <li><a href="#">France</a></li>
                                <li><a href="#">Spain</a></li>
                                <li><a href="#">Germany</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="page-contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="nk-contacts-right">
                <div class="nk-navbar">
                    <ul class="nk-nav">
                        <li>
                            <a href="https://twitter.com/nkdevv" target="_blank">
                                <span class="ion-social-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://dribbble.com/_nK" target="_blank">
                                <span class="ion-social-dribbble-outline"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ion-social-instagram-outline"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ion-social-pinterest"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Top Contacts -->

    <!--
        START: Navbar

        Additional Classes:
            .nk-navbar-sticky
            .nk-navbar-transparent
            .nk-navbar-autohide
            .nk-navbar-light
    -->
    <nav class="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-autohide">
        <div class="container">
            <div class="nk-nav-table">

                <a href="index.html" class="nk-nav-logo">
                    <img src="assets/images/logo.png" alt="" width="90">
                </a>

                <ul class="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
                    ...
                </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>

                    <li class="single-icon">
                        <a href="#" class="nk-search-toggle no-link-effect">
                            <span class="nk-icon-search"></span>
                        </a>
                    </li>

                    <li class="single-icon">
                        <a href="#" class="no-link-effect" data-nav-toggle="#nk-side">
                            <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;
• Top Contacts:
  • .nk-contacts-top-light – light background color;
• Navigation:
  • .nk-navbar-light – light background color;
  • .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;