Creating Mega Menus

You can easily create some simple mega menus with 1,2,3,4,5 or 6 columns by simply adding a couple classes to your parent menu item.

First, create your menu. Then add the classname “megamenu” in the CSS Classes box for the parent item you want to have a mega menu dropdown on. Also add the classname “col-3” where 3 can be exchanged for 1,2,4,5 or 6 based on how many columns you want for your mega menu.

Mega Menu

Nest items that you to be a part of your mega menu under the parent, and then add more items under those to create multiple columns (multiple dropdowns). Each sub-dropdown will become 1 column.

Your mega menu should look something like the screenshot below (will vary on the columns you choose of course).

total-theme-mega-menu

Can’t find the CSS field for menu items? It’s probably just disabled, enable it in the “screen options” tab in the top right corner of your WordPress Dashboard.

Screen Options

Hide The “Headings”

To hide the main headings  you simply need to add the classname “hide-headings” to the same menu item that has the “megamenu” class applied to.

hide-menu-headings