Category Megamenu

Industries

  • Computers & Electronics
  • Fitness & Supplements
  • Furniture & Homewares
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Animal & Petcare
  • Events & Party Supplies
  • Food & Beverages

Wireframe

Category Megamenu

Coding Instructions

Step 1. Add the category menu code

Open headers/template.html, find this line of code <ul class="nav navbar-nav">, and paste the following menu coding directly below it:

[%cache type:'cmenu' id:'header_cat_menu'%]
[%content_menu content_type:'category' sortby:'sortorder,name' show_empty:'1'%]
    [%param header%]
    <li class="dropdown dropdown-hover"><a href="[@home_url@]/products" class="dropdown-toggle">Products</a>
        <ul class="dropdown-menu mega-menu">
    [%/param%]
    [%param *level_1%]
            <div class="col-xs-3">
                <li><a href="[@url@]">[@name@]</a>
                    [%data id:'next_level' if:'ne' value:''%][@next_level@][%/data%]
                </li>
            </div>
    [%/param%]
    [%param *level_2%]
            <li>
                <a href="[@url@]">[@name@]</a>
            </li>
    [%/param%]
    [%param footer%]
        </ul>
    </li>
    [%/param%]
[%/content_menu%]
[%/cache%]

Notes On The Above Code

This code places first and second level categories into a 4 column layout, with the height for each row defined by the category group with the most number of links.

Step 2. Add the CSS

Paste the following CSS into the stylesheet:

@media (min-width: 768px) {
    .mega-menu {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .mega-menu {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .mega-menu {
        width: 1170px;
    }
}
.mega-menu .col-xs-3:nth-of-type(4n+5) {
    clear: left;
}

Final Result

Multi-Item Add

Download Files

Download Files


Was this article useful?

Be notified when this page is updated. Optional.