Pritish kumar Pritish kumar - 3 months ago 13
CSS Question

How to add the mega menu in bootstrap menu bar

I have using bootstrap in my Menu bar.Now i want my menu bar to be mega menu but not getting how to show the mega menu using bootstrap.I want dropdown to be mega menu

<ul class="dropdown-menu">
..
Here is the HTML..

<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-item.html">Blog Single</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>

Answer

Extend your bootstrap with Yamm3 megamenu

Here is link to widget

http://geedmo.github.io/yamm3/

And use it like this

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li>
               <div class="yamm-content">
                  <div class="row"> 
                    ...
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

Here is working fiddle

http://jsfiddle.net/DTcHh/1698/

Comments