Introduction

Navik - HTML header navigation menu
version: 1.4.2
Created: 18 April 2018
Last Update: 15 May 2020
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
  • All SCSS files included
  • Easy to customize
  • Code quality
  • Well documented
  • Support help

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

Files

When you extract zip file from download package, you will see the folder tree structure below.

Download package/

├── document

├── examples [all menu examples]

├── src
	└── assets [contain svg icons that using in overlay navigation menu]
	└── build [contain stylelintrc and postcss config files which using for compile Sass]
	└── dist [contain all required CSS and javascript files which you need to include into your HTML]
	└── modules [contain required files for Bootstrap 4 and Font Awesome]
	└── scss [contain all SCSS files]
	└── vender [contain jquery-3.5.1.min.js and reset.css]

Installation

Include CSS

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

<link rel="stylesheet" href="modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="modules/fontawesome/css/all.min.css">
<link rel="stylesheet" href="dist/css/navik-all.min.css">

You can choose a specific CSS file from folder dist/css for including some or all of menu styles as below.

CSS files Including
navik-all.min.css
navik-all.css		 all of menu styles
navik-horizontal-default-menu.min.css
navik-horizontal-default-menu.css		 horizontal default menu
navik-horizontal-center-menu.min.css
navik-horizontal-center-menu.css		 horizontal center menu
navik-overlay-menu.min.css
navik-overlay-menu.css		 fullscreen overlay menu
navik-overlay-slide-menu.min.css
navik-overlay-slide-menu.css		 overlay slide menu
navik-fixed-sidebar-menu.min.css
navik-fixed-sidebar-menu.css		 fixed sidebar menu
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="vendor/css/reset.css">
....
....
<link rel="stylesheet" href="dist/css/navik-all.min.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="vendor/js/jquery-3.5.1.min.js"></script>
<script src="dist/js/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>

SCSS

Navik navigation menu provided source Sass files in folder SCSS which you can customize them to restyle the menu to suit your needs, in case you need to customize SCSS files, you can recompile by follow the step below when you have already changed SCSS configuration.

Run these commands to install additional packages like node-sass, autoprefixer, postcss, stylelint, clean-css.

npm install node-sass clean-css-cli autoprefixer postcss-cli stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-recommended-scss watch -D

Now you have all the packages you need and you can recompile SCSS by run command below.

npm run css
SCSS configuration

You can config @import rule in main.scss and _breakpoints.scss as below to recompile SCSS for each style of menu.

Horizontal default menu

Enable@import rule in main.scss

@import "theming";
@import "mixins";
@import "default-menu";
@import "burger-menu";
@import "dark-version";
@import "mega-menu";
@import "mega-menu-dark";
@import "menu-icons";
@import "breakpoints";

Enable@import rule in _breakpoints.scss

@import "breakpoint-max";

@media (min-width: $media-breakpoint-md) {
  @import "breakpoints/md/default-menu";
  @import "breakpoints/md/mega-menu";
  @import "breakpoints/md/menu-icons";
}

@media (min-width: $media-breakpoint-lg) {
  @import "breakpoints/lg/default-menu";
  @import "breakpoints/lg/header-sticky";
  @import "breakpoints/lg/header-transparent";
  @import "breakpoints/lg/hover-transitions";
  @import "breakpoints/lg/submenu";
  @import "breakpoints/lg/submenu-transitions";
  @import "breakpoints/lg/mega-menu";
}
Horizontal center menu

Enable@import rule in main.scss

@import "theming";
@import "mixins";
@import "default-menu";
@import "burger-menu";
@import "center-menu";
@import "dark-version";
@import "mega-menu";
@import "mega-menu-dark";
@import "menu-icons";
@import "breakpoints";

Enable@import rule in _breakpoints.scss

@import "breakpoint-max";

@media (min-width: $media-breakpoint-md) {
  @import "breakpoints/md/default-menu";
  @import "breakpoints/md/mega-menu";
  @import "breakpoints/md/menu-icons";
}

@media (min-width: $media-breakpoint-lg) {
  @import "breakpoints/lg/default-menu";
  @import "breakpoints/lg/header-sticky";
  @import "breakpoints/lg/center-menu";
  @import "breakpoints/lg/header-transparent";
  @import "breakpoints/lg/hover-transitions";
  @import "breakpoints/lg/submenu";
  @import "breakpoints/lg/submenu-transitions";
  @import "breakpoints/lg/mega-menu";
}
Fullscreen overlay menu

Enable@import rule in main.scss

@import "theming";
@import "mixins";
@import "burger-menu";
@import "overlay-dropdown-plus";
@import "overlay-menu";
@import "overlay-menu-submenu-vertical";
@import "overlay-menu-social-media";
@import "overlay-menu-dark";
@import "overlay-menu-bg-color";
@import "overlay-menu-bg-image";
@import "menu-icons";
@import "breakpoints";

Enable@import rule in _breakpoints.scss

@import "breakpoint-max";

@media (min-width: $media-breakpoint-md) {
  @import "breakpoints/md/overlay-dropdown-plus";
  @import "breakpoints/md/overlay-menu";
  @import "breakpoints/md/menu-icons";
}

@media (min-width: $media-breakpoint-lg) {
  @import "breakpoints/lg/overlay-dropdown-plus";
  @import "breakpoints/lg/overlay-menu";
}
Overlay slide menu

Enable@import rule in main.scss

@import "theming";
@import "mixins";
@import "burger-menu";
@import "overlay-dropdown-plus";
@import "overlay-menu";
@import "overlay-menu-submenu-vertical";
@import "overlay-menu-social-media";
@import "overlay-slide-menu";
@import "overlay-menu-dark";
@import "overlay-menu-bg-color";
@import "overlay-menu-bg-image";
@import "menu-icons";
@import "breakpoints";

Enable@import rule in _breakpoints.scss

@import "breakpoint-max";

@media (min-width: $media-breakpoint-md) {
  @import "breakpoints/md/overlay-dropdown-plus";
  @import "breakpoints/md/overlay-menu";
  @import "breakpoints/md/overlay-slide-menu";
  @import "breakpoints/md/menu-icons";
}

@media (min-width: $media-breakpoint-lg) {
  @import "breakpoints/lg/overlay-dropdown-plus";
  @import "breakpoints/lg/overlay-menu";
}
Fixed sidebar menu

Enable@import rule in main.scss

@import "theming";
@import "mixins";
@import "burger-menu";
@import "overlay-dropdown-plus";
@import "overlay-menu-social-media";
@import "fixed-sidebar-menu";
@import "fixed-sidebar-menu-dark";
@import "fixed-sidebar-menu-bg-color";
@import "menu-icons";
@import "breakpoints";

Enable@import rule in _breakpoints.scss

@import "breakpoint-max";

@media (min-width: $media-breakpoint-md) {
  @import "breakpoints/md/overlay-dropdown-plus";
  @import "breakpoints/md/menu-icons";
}

@media (min-width: $media-breakpoint-lg) {
  @import "breakpoints/lg/overlay-dropdown-plus";
  @import "breakpoints/lg/fixed-sidebar-menu";
}

Upgrading to version 1.4.2

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

  1. Copy folder src / dist from download package and paste overwrite to the old one in your root path.
  2. If you are using SCSS, please copy folder src / scss from download package and paste overwrite to the old one, then follow the menu SCSS from this document to recompile.
  3. Copy folder src / modules and src / vendor from download package and paste overwrite to the old one in your root path to update Bootstrap, Fontawesome and jQuery to latest version ( You can ignore this step if you have already installed these frameworks to your template ).

Release log

Changes in version 1.4.2
  • Fixed media query bug on Safari
  • Updated jQuery, Bootstrap and Font Awesome to latest version
Changes in version 1.4.1
  • Improved fixed sidebar menu CSS
Changes in version 1.4
  • SCSS files included
  • Updated Font Awesome to latest version
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.