Skip to main content

MegaNavbar. (v 2.2.0) Advanced Navbar for Bootstrap 3.0+ from Twitter.

Lightweight and pure CSS MegaNavbar component, that uses the standard navbar markup, and the fluid grid system classes from Bootstrap 3. Work for fixed and responsive layout, and has the facility to include any Bootstrap component except dropdown. MegaNavbar is compatible with mobile devices and modern web browsers.


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

Complete online documentation: MegaNavbar.com

What’s New in Version 2.2.0: animation added, RTL languages support, SASS-powered skins, Simple Line Icons added, some additional features added, etc...

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!

What's included

Within MegaNavbar you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

MegaNavbar/
├──assets/
│  ├──css/
│  │  ├── animation/ ...
│  │  ├── less/ ...
│  │  ├── sass/ ...
│  │  ├── skins/ ...
│  │  │
│  │  ├── MegaNavbar.min.css
│  │  ├── MegaNavbar-rtl.min.css
│  │  ├── MegaNavbar.css
│  │  └── MegaNavbar-rtl.css
│  │
│  └──plugins/
│     ├── bootstrap/ ...
│     ├── bootstrap-rtl/ ...
│     ├── font-awesome/ ...
│     ├── simple-line-icons/ ...
│     │
│     └── jquery-1.11.1.min
│
├──changelog.txt
└──index.html

Basic setup (LTR language version)

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 href="MegaNavbar/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="MegaNavbar/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- Simple Line Icons -->
    <link href="MegaNavbar/assets/plugins/simple-line-icons/simple-line-icons.css" rel="stylesheet">
    <!-- MegaNavbar-->
    <link rel="stylesheet" type="text/css" href="MegaNavbar/assets/css/MegaNavbar.min.css">
    <link rel="stylesheet" type="text/css" href="MegaNavbar/assets/css/skins/navbar-inverse.css">
    <link rel="stylesheet" type="text/css" href="MegaNavbar/assets/css/animation/animation.css">
  </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="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="MegaNavbar">
          <ul class="nav navbar-nav navbar-left">
            <!-- Left side navigation-->
            ...
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- Right side navigation-->
            ...
          </ul>
        </div>
      </div>
    </nav>
    <!-- end MegaNavbar-->

    <h1>Hello, world!</h1>

    <!-- jQuery JavaScript-->
    <script src="MegaNavbar/assets/plugins/jquery-1.11.1.min.js"></script>
    <!-- Bootstrap JavaScript-->
    <script src="MegaNavbar/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Basic setup (RTL language version)

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 href="MegaNavbar/assets/plugins/bootstrap-rtl/css/bootstrap-arabic.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="MegaNavbar/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- Simple Line Icons -->
    <link href="MegaNavbar/assets/plugins/simple-line-icons/simple-line-icons.css" rel="stylesheet">
    <!-- MegaNavbar-->
    <link rel="stylesheet" type="text/css" href="MegaNavbar/assets/css/MegaNavbar-rtl.min.css">
    <link rel="stylesheet" type="text/css" href="MegaNavbar/assets/css/skins/navbar-inverse.css">
    <link rel="stylesheet" type="text/css" href="MegaNavbar/assets/css/animation/animation.css">
  </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="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="MegaNavbar">
          <ul class="nav navbar-nav navbar-left">
            <!-- Left side navigation-->
            ...
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- Right side navigation-->
            ...
          </ul>
        </div>
      </div>
    </nav>
    <!-- end MegaNavbar-->

    <h1>Hello, world!</h1>

    <!-- jQuery JavaScript-->
    <script src="MegaNavbar/assets/plugins/jquery-1.11.1.min.js"></script>
    <!-- Bootstrap JavaScript-->
    <script src="MegaNavbar/assets/plugins/bootstrap-rtl/js/bootstrap-arabic.min.js"></script>
  </body>
</html>

Sources and Credits

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

  • Bootstrap (v. 3.2.0) - http://getbootstrap.com is released under the MIT http://opensource.org/licenses/mit-license.html license and is copyright 2014 Twitter.
  • Bootstrap arabic (v. 3.2.0) for RTL languages support https://github.com/izer0x/bootstrap-3-arabic is released under the MIT http://opensource.org/licenses/mit-license.html license and is copyright 2014 Twitter.
  • jQuery (v. 1.11.1) - http://jquery.com projects are released under the terms of the MIT license. http://opensource.org/licenses/mit-license.html
  • Font awesome icon (v. 4.2.0) - http://fontawesome.io/ licensed under SIL OFL 1.1 http://scripts.sil.org/OFL. Code licensed under MIT License http://opensource.org/licenses/mit-license.html
  • Simple Line Icons - http://graphicburger.com licensed under GraphicBurger License http://graphicburger.com/license/

License

MegaNavbar is released under Regular License (http://codecanyon.net/licenses/regular) and Extended License (http://codecanyon.net/licenses/extended)


Online documentation

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 items on Codecanyon.net, 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