Horizontal Megamenu with Sidebar Tools

Avenger comes built-in with a lightweight and pure CSS megamenu 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 (almost) any Bootstrap elements.

Fixed width menu with Navbar Default style

Markup

  • Reuse navbar markup and add class .yamm at the top.
  • Then add your markup into the .dropdown-menu
  • Optionally, use .yamm-content to wrap content with padding.
  • Optionally, add a fixed width to ul.dropdown-menu using style
<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"> 
                    ...
                  </div>
               </div>
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

Full width menu with Navbar Inverse style

Width

By default every mega-dropdown will take the content size so is possible to use add .yamm-fw to .dropdown to expand it fullwidth

Yamm works better with fullwidth menus.

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown yamm-fw">
             ...
       </li>
     </ul>
...
</nav>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, asperiores, minima nostrum non ratione quibusdam minus facere neque sit quos quidem dolore deserunt officia harum iusto reprehenderit nesciunt totam nulla? Fugit excepturi veniam quos iste sint ad ipsum natus deleniti perferendis voluptatem. Harum, natus consequuntur dolorum quae repudiandae necessitatibus ducimus molestiae cumque. Explicabo, cumque, eveniet, expedita iure earum reprehenderit vel non doloremque repellat sunt minima eum reiciendis quia quaerat fuga similique provident incidunt accusantium voluptatem ex. Quaerat, laboriosam, doloremque, ipsum, voluptas soluta dolores ea tempora voluptatibus minus reprehenderit laborum vitae dolorum eos blanditiis nulla itaque atque. Explicabo, iure veritatis id.

  • Earnings
    $22,500
  • Orders
    4,750
More Sparklines
See all activities
UI Design
12/16
UX Design
8/24
Frontend Development
8/40
Backend Development
24/48
See All