Base CSS and JS

The base CSS and JS files that need to be called are:

<!-- Place these BEFORE the opening body tag -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Mega Menu Style, you kinda really need Bootstrap in order for this to work -->
<link href="css/mega-menu.css" rel="stylesheet">
	
<!-- Mega Menu w/Responsive, unload this if you don't want to be responsive (which kinda defeats the purpose) -->
<link href="css/mega-menu-responsive.css" rel="stylesheet">

<!-- Place these BEFORE the closing body tag -->
<script src="js/bootstrap.min.js"></script>
<!-- If you would like responsive Videos -->
<script src="js/fitvid.js"></script>
<script>
// Basic FitVids Test
$(".container").fitVids();
</script>

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<div class="navbar navbar-inverse">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- .navbar-header -->
   
<div class="navbar-collapse collapse">
    
<ul class="nav navbar-nav">
	
<li class="dropdown mega-menu-2"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega <b class="caret"></b></a>
 <ul class="dropdown-menu">

  <li class="one-column">
   <ul>
    <li class="nav-title">This Header</li>
    <li><a href="#">Menu Item</a></li>
   </ul>
  </li>

  <li class="one-column">
   <ul>
    <li class="nav-title">Is Optional</li>
    <li><a href="#">Menu Item</a></li>
   <ul>
  </li>

 <ul><!-- .dropdown-menu -->

</li><!-- .mega-menu-2 -->

</ul><!-- .nav -->

</div><!--.nav-collapse -->

</div><!-- .navbar .navbar-inverse -->

Add More Columns

To get more columns in your menu, adjust the CSS tag accordingly:

<ul class="dropdown mega-menu-2">
<ul class="dropdown mega-menu-3">
<ul class="dropdown mega-menu-4">
<ul class="dropdown mega-menu-5">
<ul class="dropdown mega-menu-6">
  

Expand Columns

You can expand columns to two, three, four or wide widths, here's how:

<!-- Two column width menu -->
  <li class="two-column">
   <ul>
    <li class="nav-title">This Header</li>
    <li><a href="#">Menu Item</a></li>
   </ul>
  </li>

<!-- Three column width menu-->
  <li class="three-column">
   <ul>
    <li class="nav-title">This Header</li>
    <li><a href="#">Menu Item</a></li>
   </ul>
  </li>

<!-- Four column width menu -->
  <li class="four-column">
   <ul>
    <li class="nav-title">This Header</li>
    <li><a href="#">Menu Item</a></li>
   </ul>
  </li>

<!-- Five column width menu -->
  <li class="five-column">
   <ul>
    <li class="nav-title">This Header</li>
    <li><a href="#">Menu Item</a></li>
   </ul>
  </li>
  

Add Icons

Bootstrap offers icons by default, you can use them in your menu as shown. For a full list of supported icons, please look at this page:

<i class="icon-plus-sign"></i> Title
<span class="icon-plus-sign"></span> Title

Add Styles

You can change the styles of the drop down menu, by adding a simple CSS class.

Please refer to styles.htm to see how it's implemented:

<ul class="dropdown-menu style-bottom-round">
<ul class="dropdown-menu style-transparent">
<ul class="dropdown-menu style-background">
<ul class="dropdown-menu style-gradient">
<ul class="dropdown-menu style-fade-in">

Misc. Markup

Other markup that will help you fine tune your Mega Menu.

<!-- Align the drop down to the right -->
<ul class="dropdown-menu pull-right">

<!-- Automatically re-size images in menus, and give it rounded edges -->
<li class="with-image"><img src="img/product.jpg" alt="Cool Product" class="img-rounded" /></li>

Color Styles

These CSS files should be called AFTER the mega-menu.css file.

Please refer to colors.htm to see how it's implemented:

<link href="css/red.css" rel="stylesheet">
<link href="css/blue.css" rel="stylesheet">
<link href="css/teal.css" rel="stylesheet">
<link href="css/green.css" rel="stylesheet">
<link href="css/orange.css" rel="stylesheet">

How To Use

Simply add any of the CSS classes to the specific div for your desired color choice:

<div class="navbar navbar-default">

<div class="navbar navbar-inverse">

<div class="navbar navbar-red">

<div class="navbar navbar-orange">

<div class="navbar navbar-green">

<div class="navbar navbar-blue">

<div class="navbar navbar-teal">

JavaScript Files

Dropdown menus in Bootstrap need jQuery to work, here's a list of the other essential JS files required for responsive Mega Menu:

rMM has built in support for 5 carefully selected Google font families, for your headings and text:

<!-- Simply uncomment whichever font family you want to use -->