This article has moved to a new home. View the updated version Tweak Library

Category Megamenu

A category megamenu, allowing users to see your top and sub-categories in one large menu.


  • 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


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'%]
[%categorymenu sortby:'sortorder,selected,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 *level_1%]
            <div class="col-xs-3">
                <li><a href="[@url@]">[@name@]</a>
                    [%data id:'next_level' if:'ne' value:''%][@next_level@][%/data%]
    [%param *level_2%]
                <a href="[@url@]">[@name@]</a>
    [%param footer%]

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

2 related articles found:

Was this article useful?

Be notified when this page is updated. Optional.