Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

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: