### “MegaNavbar” Documentation by “Eduard Neganov” v2.2.0

# “MegaNavbar”

## Complete online documentation: MegaNavbar.com

Created: 07/08/2014
Updated: 11/12/2014
By: Eduard Neganov
Email: info@meganavbar.com
Web: MegaNavbar.com

Thank you for purchasing my item. 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 here. Thanks so much!

## Table of Contents

1. Migrate from version 2.1.0 to version 2.2.0
2. Migrate from version 2.0.0 to version 2.1.0
3. Migrate from version 1.0.0 to version 2.0.0
4. Basic setup
5. CSS Files and Structure
6. JavaScript
7. Sources and Credits
8. ChangeLog v 2.2.0
9. ChangeLog v 2.1.0
10. ChangeLog v 2.0.0
11. Online documentation

### MIGRATE FROM VERSION 2.1.0 TO VERSION 2.2.0 - top

No changes needed. Just replace all .css files

### MIGRATE FROM VERSION 2.0.0 TO VERSION 2.1.0 - top

In this version (2.1.0), some changes were made in the skin style (css) file. If you have made changes in the skin file, you will need to get the latest version (2.1.0) of the skin and make the necessary changes again.

### MIGRATE FROM VERSION 1.0.0 TO VERSION 2.0.0 - top

For the correct display caret in the main menu, you need to add `<span class = "caret"></span>` element inside
`<a data-toggle="dropdown" href="#" class="dropdown-toggle"> ... </a> element`

Example:

    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
        Menu item name here
        <span class="caret"></span>
    </a>

### Basic setup - top

Start with this basic HTML template. We hope that you can easily customize our examples, adapting them to suit your needs.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MegaNavbar: advanced Bootstrap navbar plugin</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!--for Bootstrap CDN version-->
        <!--or for Bootstrap local/server version: <link href="MegaNavbar/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->

        <!-- Bootstrap rtl language support-->
        <!-- <link href="MegaNavbar/assets/plugins/bootstrap-rtl/css/bootstrap-arabic.min.css" rel="stylesheet"> -->

        <!-- Font Awesome -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <!--for Font Awesome CDN version-->
        <!--or for Font Awesome local/server version: <link href="MegaNavbar/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"> -->

        <!-- Simple Line Icons licensed under GraphicBurger License http://graphicburger.com/license/ -->
        <link href="MegaNavbar/assets/plugins/simple-line-icons/simple-line-icons.css" rel="stylesheet"/>

        <!-- MegaNavbar-->
        <link rel="stylesheet" href="MegaNavbar/assets/css/MegaNavbar.min.css">           <!-- MegaNavbar main style file -->
        <link rel="stylesheet" href="MegaNavbar/assets/css/skins/navbar-inverse.css">     <!-- MegaNavbar desired skin name here -->
        <link rel="stylesheet" href="MegaNavbar/assets/css/animation/animation.css">      <!-- MegaNavbar open menu animation styles -->

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>

      <!-- begin MegaNavbar-->
      <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
          <!-- for full width layout or use class="container" for boxed layout -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MegaNavbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MegaNavbar</a>
            <ul class="nav navbar-nav navbar-left">
              <!-- All links, or menu items placed below, will not be hidden on small devices-->
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
            </ul>
          </div>
          <div class="collapse navbar-collapse" id="MegaNavbar">
            <!-- All links, or menu items placed below, will be hidden on small devices-->
            <ul class="nav navbar-nav navbar-left">
              <!-- Left side navigation-->
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-level-down"></i> Mainbar item<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li class="dropdown-header">Dropdown header</li>
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <!-- Right side navigation-->
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-level-down"></i> Mainbar item<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li class="dropdown-header">Dropdown header</li>
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- end MegaNavbar-->

        <h1>Hello, world!</h1>

        <!-- jQuery JavaScript CDN version (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!--or for jQuery JavaScript local/server version: <script src="MegaNavbar/assets/plugins/jquery-1.11.1.min.js"></script>  -->

        <!-- Latest compiled and minified Bootstrap JavaScript CDN version -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!--or for Bootstrap JavaScript local/server version: <script src="MegaNavbar/assets/plugins/bootstrap/js/bootstrap.min.js"></script>  -->

      </body>
    </html>

### CSS Files and Structure - top

MegaNavbar imports three CSS files.

1. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
2. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
3. MegaNavbar main css file + skin css file

        <!-- Bootstrap -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!--for Bootstrap CDN version-->
        <!--or for Bootstrap local/server version: <link href="MegaNavbar/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->

        <!-- Bootstrap rtl language support-->
        <!-- <link href="MegaNavbar/assets/plugins/bootstrap-rtl/css/bootstrap-arabic.min.css" rel="stylesheet"> -->

        <!-- Font Awesome -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <!--for Font Awesome CDN version-->
        <!--or for Font Awesome local/server version: <link href="MegaNavbar/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"> -->

        <!-- MegaNavbar-->
        <link rel="stylesheet" href="MegaNavbar/assets/css/MegaNavbar.min.css">           <!-- MegaNavbar main style file -->
        <link rel="stylesheet" href="MegaNavbar/assets/css/skins/navbar-inverse.css">     <!-- MegaNavbar desired skin name here -->
        <link rel="stylesheet" href="MegaNavbar/assets/css/animation/animation.css">      <!-- MegaNavbar open menu animation styles -->

I'm using two required CSS files and one optional CSS file for animation effects.

The first one is a main style file. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific skin stylings for the MegaNavbar. This file contains styling, such texts colors, backgrounds colors, borders colors, shadows colors etc.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

    .navbar-inverse .navbar-link {color: #777;}

Optional file is needed if you want to use an animation effect on menu open.

### JavaScript - top

This theme imports three Javascript files.

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Bootstrap Bring Bootstrap's components to life

        <!-- jQuery JavaScript CDN version (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!--or for jQuery JavaScript local/server version: <script src="MegaNavbar/assets/plugins/jquery-1.11.1.min.js"></script>  -->

        <!-- Latest compiled and minified Bootstrap JavaScript CDN version -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!--or for Bootstrap JavaScript local/server version: <script src="MegaNavbar/assets/plugins/bootstrap/js/bootstrap.min.js"></script>  -->

To prevent unexpected menu close when using some components (like accordion, tabs, forms, etc) or submenus, please add the next JavaScript to your page

    <script>
        $( window ).load(function() {
            $(document).on('click', '.navbar .dropdown-menu', function(e) {e.stopPropagation();})
        });
    </script>

### Sources and Credits - top

I've used the following javascripts, framework, icons or other files as listed.

- Bootstrap (v. 3.2.0) - http://getbootstrap.com
- Bootstrap arabic (v. 3.2.0) for RTL languages support https://github.com/izer0x/bootstrap-3-arabic
- jQuery (v. 1.11.1) - http://jquery.com
- Font awesome icon (v. 4.2.0) - http://fontawesome.io/
- Simple Line Icons - http://graphicburger.com

### ChangeLog v 2.2.0 - top

#### FIXED:

- `.dropdown-wide` & `.dropdown-full` with `.dropdown-onhover`
- rtl version caret issue have been fixed
- some tab style was added.

### ChangeLog v 2.1.0 - top

#### THE FOLLOWING NEW FEATURES WERE ADDED:

- RTL languages support. Thanks to izer0x Bootstrap arabic https://github.com/izer0x/bootstrap-3-arabic
- Simple Line Icons (scalable vector icons font)
- Animation on open menu
- `.xs-hover` class added for force menu show on small devices on mouse hover
- `.xs-height25`, `.xs-height33`, `.xs-height50`, `.xs-height66`, `.xs-height75`, `.xs-height100` classes added for set height of expanded menu on small divaces
- `.no-fix` class added for Main menu fix/no fix by mouse click

#### THE FOLLOWING NEW FEATURES WERE UPDATED:

- Font Awesome updated to Version 4.2.0 (http://fontawesome.io)
- Some other minor updates

#### THE FOLLOWING NEW FEATURES WERE CHANGED:

- Some changes were made in the skins files
- Some other minor changes

### ChangeLog v 2.0.0 - top

#### THE FOLLOWING MAJOR NEW FEATURES WERE ADDED:

- Mainbar dividers
- Expandable forms
- .bordered class (apply to .dropdown-menu element)
- .no-active-arrow class (apply to .navbar element)
- .no-open-arrow class (apply to .navbar element)
- .dropdown-onhover now you can aplly to .navbar, .navbar-nav or navbar-nav>li elements

#### THE FOLLOWING MAJOR NEW FEATURES WERE CHANGED:

For the correct display caret in the main menu, you need to add `<span class = "caret"></span>` element inside
`<a data-toggle="dropdown" href="#" class="dropdown-toggle"> ... </a> element`

Example:

    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
        Menu item name here
        <span class="caret"></span>
    </a>

#### THE FOLLOWING ITEMS WERE FIXED:

- Show menu on hover
- Submenu caret left position for small divices
- Some major & minor fixes

### ONLINE DOCUMENTATION - top

#### DOCUMENTATION FOR CURRENT VERSION (v 2.2.0):

http://meganavbar.com

#### DOCUMENTATION FOR VERSION 2.1.0:

http://meganavbar.com

#### DOCUMENTATION FOR VERSION 2.0.0:

http://meganavbar.com/2.0.0/

#### DOCUMENTATION FOR VERSION 1.0.0:

http://meganavbar.com/1.0.0/

#### VISUAL SKIN BUILDER FOR THIS VERSION:

http://meganavbar.com#doc/skin/builder.html

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

For additional information about installation, usage, customization and numerous examples you can see on site: MegaNavbar.com

Eduard Neganov

Go To Table of Contents