What are mega menus?

Mega menus are used when there are several pages and/or filtered pages that need to be displayed across a horizontal navigation. The feature is normally used for eCommerce websites with large product ranges.

Mega menus allow for content beneath a menu bar to be displayed in columns. This is a good way of displaying a large amount of items on a menu without the use of lengthy single-column dropdowns. In addition, search items can be displayed on the menu following an attribute filter, allowing customers to find products easily through fewer clicks through your website.

The menu offers a larger range of styling options, including the use of a opacity colour mask to distinguish the menu from the rest of webpage screen. 

Setting up mega menus

First you will need to select the mega menu navigation option to be displayed in the horizontal navigation (instead of an ordinary horizontal menu).

You can do this by going to Design > Page Layout and clicking the pen icon on the navigation bar. Then select "Top level with mega menus" from the dropdown next to "Display".

The menu will now only display top level items unless a mega menu is set up for items on the horizontal navigation. To set up a mega menu beneath an item on the nav, first select the item in Tree View.

Start by clicking Options > Mega Menu Items, followed by clicking "Create a Menu".

Once the menu table has been created, add items to the menu by simply dragging them from Tree View into the menu table. You can read more about how this is done here.

Finally, for your menu to be displayed aesthetically as desired, you will need to style it in the design section. 

Styling your mega menus

To style your mega menus first go to Design > Menus > Mega Dropdown. 

The editor is shown below:

Each menu editor has the "Edit Raw Data" feature, enabling you to quickly copy menu styling from one KhooSeller website to another should you so need to.

Caution: We do not recommend changing anything unless you know exactly what you're doing. This part is usually completed by your designer.

After you have finished editing click "Save Changes".

A complete list of your mega menus can be found under My Site > Tools > Mega dropdowns.