Introduction

Navik - HTML header navigation menu
version: 1.3.1
Created: 18 April 2018
Last Update: 15 January 2019
By: Pophonic
Email: poppong22@hotmail.com
codecanyon.net/user/pophonic

Thank you for purchasing my product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form codecanyon.net/user/pophonic Thanks so much!

Navik responsive navigation menu comes with various styles of menu including standard menu, center logo menu, sidebar slide menu and fullscreen overlay navigation menu, also created with clean and simple CSS, javascript which you can easily adapt the navigation menu to suit your needs.

Navik is compatible with mobile devices and modern web browsers, also including well documented which makes easy to understand and helps you to place it on your website.

Features

  • Fully Responsive
  • Compatible with Bootstrap Grid System
  • Compatible with Font Awesome 5
  • Standard navigation menu
  • Center logo navigation menu
  • Sidebar slide navigation menu
  • Fullscreen overlay navigation menu
  • Fixed sidebar navigation menu
  • Mega menu
  • Light & Dark versions
  • Various hover transitions
  • Flexible layouts
  • Easy to customize
  • Code quality
  • Well documented
  • Support help

Note: All images in the demo use for sample preview only.

Files

There are all required files in src folder which you need to include CSS and javascript into your HTML.

Files
  • jquery-3.3.1.min.js (required file)
  • navik.menu.js (required file)
  • navik.menu.css (required file)
  • reset.css (optional file)
Folder
  • assets / svg (contain svg icons that using in overlay navigation menu)
  • modules / bootstrap (contain required files for Bootstrap 4)
  • modules / fontawesome (contain required files for Font Awesome 5)

Installation

Include CSS

First, include bootstrap.min.css (Bootstrap) , all.min.css (Font Awesome) and navik.menu.css files into your HTML head.

<link rel="stylesheet" href="src/modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="src/modules/fontawesome/css/all.min.css">
<link rel="stylesheet" href="src/navik.menu.css">
You can change Bootstrap and Font Awesome to your specific path if you have already installed Bootstrap framework and Font Awesome 5 to your template.

You can include reset.css file to reset CSS for your template.

<link rel="stylesheet" href="src/reset.css">
....
....
<link rel="stylesheet" href="src/navik.menu.css">
reset.css file should be included before any *.css files..
You can ignore this step if you have already installed Bootstrap framework to your template.
Include JS

include jQuery and navik.menu.js into the footer before </body> tag.

<script src="src/jquery-3.3.1.min.js"></script>
<script src="src/navik.menu.js"></script>

Bootstrap

Navik compatible with Bootstrap 4 grid system the newest version of Bootstrap; including new components, faster stylesheet and more responsiveness.

Also compatible with Bootstrap 3.x grid system in case you have alerady installed the lower version of Bootstrap to your template.

Please read more informations about Bootstrap from this link Bootstrap.

HTML structure

Horizontal menu markup

Insert HTML markup below into your <body> tag as header section, this HTML markup should be included before any elements.

<!-- Header -->
<div class="navik-header">
  <div class="container">

    <!-- Navik header -->
    <div class="navik-header-container">
				
      <!--Logo-->
      <div class="logo" data-mobile-logo="images/logo.png" data-sticky-logo="images/logo.png">
        <a href="#"><img src="images/logo.png" alt="logo"/></a>
      </div>
				
      <!-- Burger menu -->
      <div class="burger-menu">
        <div class="line-menu line-half first-line"></div>
        <div class="line-menu"></div>
        <div class="line-menu line-half last-line"></div>
      </div>

      <!--Navigation menu-->
      <nav class="navik-menu">
        <ul>
          <li><a href="#">Menu</a>
            <ul>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
            </ul>
          </li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
        </ul>
      </nav>

    </div>

  </div>
</div>
Fullscreen overlay menu markup

Insert HTML markup below into your <body> tag as header section, this HTML markup should be included before any elements.

<!-- Header -->
<div class="navik-header-overlay">
  <div class="container">

    <!-- Navik header -->
    <div class="navik-header-container">
				
      <!--Logo-->
      <div class="logo" data-overlay-logo="images/logo.png">
        <a href="#"><img src="images/logo.png" alt="logo"/></a>
      </div>
				
      <!-- Burger menu -->
      <div class="burger-menu">
        <div class="line-menu line-half first-line"></div>
        <div class="line-menu"></div>
        <div class="line-menu line-half last-line"></div>
      </div>

      <!--Navigation menu-->
      <nav class="navik-menu-overlay">
	  
        <ul>
          <li><a href="#">Menu</a>
            <ul>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
              <li><a href="#">Dropdown menu</a></li>
            </ul>
          </li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
        </ul>
		
        <!-- Menu social media -->
        <div class="menu-social-media">
          <a href="#" target="_blank"><img src="src/assets/svg/facebook-f-dark.svg" alt="Facebook"/></a>
          <a href="#" target="_blank"><img src="src/assets/svg/twitter-dark.svg" alt="Twitter"/></a>
          <a href="#" target="_blank"><img src="src/assets/svg/pinterest-p-dark.svg" alt="Pinterest"/></a>
          <a href="#" target="_blank"><img src="src/assets/svg/instagram-dark.svg" alt="Instagram"/></a>
          <a href="#" target="_blank"><img src="src/assets/svg/linkedin-in-dark.svg" alt="Linkedin"/></a>
        </div>

      </nav>

    </div>

  </div>
</div>
Fixed sidebar menu markup

Insert HTML markup below into your <body> tag, all your content should be placed in <div class="navik-side-content">.

<!-- Header -->
<div class="navik-fixed-sidebar navik-sidebar-left">

  <!-- Navik header -->
  <div class="navik-header-container">

    <!--Logo-->
    <div class="logo">
      <a href="#"><img src="demo/images/logo.png" alt="logo"/></a>
    </div>

    <!-- Burger menu -->
    <div class="burger-menu">
      <div class="line-menu line-half first-line"></div>
      <div class="line-menu"></div>
      <div class="line-menu line-half last-line"></div>
    </div>

    <!--Navigation menu-->
    <nav class="navik-menu-fixed">
      <ul>
        <li><a href="#">Menu</a>
          <ul>
            <li><a href="#">Dropdown menu</a></li>
            <li><a href="#">Dropdown menu</a></li>
          </ul>
        </li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>

    <!-- Menu social media -->
    <div class="menu-social-media">
      <a href="#" target="_blank"><img src="../src/assets/svg/facebook-f-dark.svg" alt="Facebook"/></a>
      <a href="#" target="_blank"><img src="../src/assets/svg/twitter-dark.svg" alt="Twitter"/></a>
      <a href="#" target="_blank"><img src="../src/assets/svg/pinterest-p-dark.svg" alt="Pinterest"/></a>
    </div>

  </div>

</div>

<!-- Entire content wrapper -->
<div class="navik-side-content">

  YOUR CONTENT

</div>

You can change social media svg icon to light version as below for fullscreen overlay menu and fixed sidebar menu (Dark).

<!-- Menu social media -->
<div class="menu-social-media">
  <a href="#" target="_blank"><img src="src/assets/svg/facebook-f-light.svg" alt="Facebook"/></a>
  <a href="#" target="_blank"><img src="src/assets/svg/twitter-light.svg" alt="Twitter"/></a>
  <a href="#" target="_blank"><img src="src/assets/svg/pinterest-p-light.svg" alt="Pinterest"/></a>
  <a href="#" target="_blank"><img src="src/assets/svg/instagram-light.svg" alt="Instagram"/></a>
  <a href="#" target="_blank"><img src="src/assets/svg/linkedin-in-light.svg" alt="Linkedin"/></a>
</div>

CSS .class selectors

There are CSS class selectors which you can insert them into your menu markup to define style of navigation menu.

Selector Insert position Description
center-menu-1 <div class="navik-header center-menu-1"> Display center logo in navigation menu. view demo
center-menu-2 <div class="navik-header center-menu-2"> Display center logo with underneath navigation menu. view demo
header-shadow <div class="navik-header header-shadow"> Add bottom shadow to header navigation menu. view demo
no-sticky <div class="navik-header no-sticky"> Disable menu sticky. view demo
header-dark <div class="navik-header header-dark"> Display dark version of horizontal navigation menu. view demo
header-transparent <div class="navik-header header-transparent"> Display navigation menu with transparent background. view demo
header-opacity <div class="navik-header header-opacity"> Display navigation menu with background opacity overlay. view demo
navik-mega-menu <div class="navik-header navik-mega-menu"> Add mega menu to your navigation menu. view demo
mega-menu-fullwidth <div class="navik-header navik-mega-menu mega-menu-fullwidth"> Display mega menu fullwidth. view demo
mega-menu <li class="mega-menu"> Add this class to parent <li> tag that you would like to display mega menu. view demo
menu-caret <nav class="navik-menu menu-caret"> Add caret to dropdown menu. view demo
separate-line <nav class="navik-menu separate-line"> Display navigation menu with separate line. view demo
menu-hover-2 <nav class="navik-menu menu-hover-2"> Parent menu hover transition style 2. view demo
menu-hover-3 <nav class="navik-menu menu-hover-3"> Parent menu hover transition style 3. view demo
menu-hover-4 <nav class="navik-menu menu-hover-4"> Parent menu hover transition style 4. view demo
submenu-top-border <nav class="navik-menu submenu-top-border"> Display dropdown menu with top border. view demo
submenu-list-border <nav class="navik-menu submenu-list-border"> Display dropdown menu with separate line. view demo
submenu-scale <nav class="navik-menu submenu-scale"> Dropdown menu transition scale. view demo
submenu-flip <nav class="navik-menu submenu-flip"> Dropdown menu transition flip. view demo
current-menu <li class="current-menu"> Add class selector to <li> parent tag to define current menu item. view demo
submenu-right <li class="submenu-right"> Add class selector to <li> parent tag to display dropdown menu with submenu aligning to the right edge of it's parent. view demo
overlay-center-menu <div class="navik-header-overlay overlay-center-menu"> Display fullscreen navigation menu with item aligning center. view demo
menu-slide <div class="navik-header-overlay menu-slide"> Display sidebar slide navigation menu. view demo
header-dark <div class="navik-header-overlay header-dark"> Display dark version of fullscreen overlay navigation menu. view demo
header-color-bg <div class="navik-header-overlay header-color-bg"> Display fullscreen overlay navigation menu with background color. view demo
header-bg-image <div class="navik-header-overlay header-bg-image"> Display fullscreen overlay navigation menu with background image. view demo
submenu-no-separate <div class="navik-menu-overlay submenu-no-separate">
or,
<div class="navik-menu-fixed submenu-no-separate">		 Disable submenu separate line (work with fullscreen overlay menu and fixed sidebar menu). view demo
navik-sidebar-left <div class="navik-fixed-sidebar navik-sidebar-left"> Display fixed sidebar menu on the left position. view demo
navik-sidebar-right <div class="navik-fixed-sidebar navik-sidebar-right"> Display fixed sidebar menu on the right position. view demo
sidebar-dark <div class="navik-fixed-sidebar sidebar-dark"> Display dark version of fixed sidebar navigation menu. view demo
sidebar-color-bg <div class="navik-fixed-sidebar sidebar-color-bg"> Display fixed sidebar navigation menu with background color. view demo
How to change logo

You can change logo by edit path url in logo markup.

Logo markup for horizontal navigation menu: 
<!--Logo-->
<div class="logo" data-mobile-logo="demo/images/logo-mobile.png" data-sticky-logo="demo/images/logo-sticky.png">
    <a href="#"><img src="demo/images/logo-desktop.png" alt="logo"/></a>
</div>

src="" is logo that display on desktop.

data-mobile-logo="" is logo that display on mobile.

data-sticky-logo="" is logo that display on sticky menu when you scroll down.

Logo markup for fullscreen navigation menu: 
<!--Logo-->
<div class="logo" data-overlay-logo="demo/images/logo-overlay.png">
    <a href="#"><img src="demo/images/logo.png" alt="logo"/></a>
</div>

src="" is logo that display on header.

data-overlay-logo="" is logo that display when fullscreen menu opened.

How to change background color of fullscreen overlay menu and fixed sidebar menu

You can add CSS below to your custom stylesheet to change background color of fullscreen overlay menu and fixed sidebar menu (background color version).

.header-color-bg .nav-menu-wrapper {
    background-color: #006aa1;
}
.navik-fixed-sidebar.sidebar-color-bg,
.sidebar-color-bg ~ .navik-side-content > .logo {
    background-color: #006aa1;
}
How to change background image of fullscreen overlay menu

You can change background image by change CSS value below in navik.menu.css at the code line number 839.

.header-bg-image .nav-menu-wrapper {
    background-color: inherit;
    background-image: url('../examples/demo/images/header-bg-image-2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Mega menu

Follow the steps below to add mega menu to your navigation menu.

1. Add class "navik-mega-menu" to <div class="navik-header">

<div class="navik-header navik-mega-menu">

You can add class "mega-menu-fullwidth" to display mega menu fullwidth.

<div class="navik-header navik-mega-menu mega-menu-fullwidth">

2. Add class "mega-menu" to parent <li> tag that you would like to display mega menu.

<!--Navigation menu-->
<nav class="navik-menu">
    <ul>
        <li class="mega-menu"><a href="#">Menu</a></li>
    </ul>
</nav>

3. Then, create the mega menu markup as below.

<!--Navigation menu-->
<nav class="navik-menu">
    <ul>
        <li class="mega-menu"><a href="#">Menu</a>
            <ul>
                <li>
										
                    <!-- Mega menu container -->
                    <div class="mega-menu-container">
						
                        ADD YOUR MEGA MENU ROW, COLUMNS, AND COMPONENTS HERE

                    </div>
										
                </li>
            </ul>
        </li>
    </ul>
</nav>

Navik compatible with Bootstrap 4 which you can add Bootstrap grid to create layout to suit your needs, the example below is markup of mega menu with four columns.

<!--Navigation menu-->
<nav class="navik-menu">
    <ul>
        <li class="mega-menu"><a href="#">Menu</a>
            <ul>
                <li>

                    <!-- Mega menu container -->
                    <div class="mega-menu-container">
                        <div class="row">

                            <div class="col-md-3">
                                ADD YOUR COMPONENTS HERE
                            </div>

                            <div class="col-md-3">
                                ADD YOUR COMPONENTS HERE
                            </div>
							
                            <div class="col-md-3">
                                ADD YOUR COMPONENTS HERE
                            </div>
							
                            <div class="col-md-3">
                                ADD YOUR COMPONENTS HERE
                            </div>

                        </div>
                    </div>

                </li>
            </ul>
        </li>
    </ul>
</nav>
Please read more informations about Bootstrap from this link Bootstrap.
Mega menu components

There are predefined mega menu components that you can use it.

1. Mega menu box: container box that wrap all elements.

<div class="mega-menu-box">
    ALL ELEMENTS
</div>

2. Mega menu thumbnail:

thumbnail 
<div class="mega-menu-thumbnail">
    <a href="#">
        <img src="YOUR IMAGE PATH" alt=""/>
    </a>
</div>

<h4 class="mega-menu-heading"><a href="#">TITLE</a></h4>

<div class="mega-menu-desc">
    DESCRIPTION
</div>

3. Mega menu media:

media 
<div class="mega-menu-media">
    <div class="mega-menu-media-img">
        <div class="mega-menu-thumbnail">
            <a href="#">
                <img src="YOUR IMAGE PATH" alt=""/>
            </a>
        </div>
    </div>
    <div class="mega-menu-media-info">
        <h4 class="mega-menu-heading"><a href="#">TITLE</a></h4>
        <div class="mega-menu-desc">
            DESCRIPTION
        </div>
    </div>
</div>

4. Mega menu unordered list:

media 
<h4 class="mega-menu-heading"><a href="#">TITLE</a></h4>
<ul class="mega-menu-list">
    <li><a href="#">LIST</a></li>
    <li><a href="#">LIST</a></li>
    <li><a href="#">LIST</a></li>
    <li><a href="#">LIST</a></li>
</ul>

Upgrading to version 1.3.1

This is the step that you must follow to get your existing navigation menu work with Navik v1.3

  1. Copy navik.menu.css and navik.menu.js files in folder src from download package and save overwrite to the old files (make sure you make a backup of the old version of these files).
  2. Copy folder bootstrap from download package and paste to the old one in your src/modules folder, if you have already installed the latest version of Bootstrap please ignore this step.
  3. Copy folder fontawesome from download package and paste to the old one in your src/modules folder, if you have already installed the latest version of Font Awesome please ignore this step.

Release log

Changes in version 1.3.1
  • Improved horizontal sticky menu
Changes in version 1.3
  • Updated Bootstrap to latest version
  • Updated Font Awesome to latest version
  • Added fixed sidebar menu
  • Added vertical dropdown version to fullscreen overlay menu
  • Minor fixes
Changes in version 1.2
  • Compatible with Font Awesome 5
  • Minor fixes
Changes in version 1.1
  • Compatible with Bootstrap 4
  • Added mega menu
  • Minor fixes

Credits

Once again, thank you so much for purchasing this item. If you need any help, please feel free to contact me through codecanyon.net/user/pophonic or email poppong22@hotmail.com. Thank you :)

Pophonic.