Skip to main content

To create a mega menu  head to the Appearance > Menus tab in your admin section and make sure that “CSS Classes” are turned on in your screen options tab in the upper right hand corner of your screen.

Once the box for them is checked, you’ll see an input field for “CSS Classes (optional)” in each of your menu items.

To turn a menu item into a mega menu, simply add the class “megamenu”. The default megamenu will use 3 columns, to customize the number of columns you can add a second class “columns-X” where X is the number of columns you desire. Currently a range of 3-6 columns are supported.

Regular Mega Menu

In a regular menu the parent menu item (A) that will house the mega menu columns is given the css class as shown above. Each direct sub item of that (B) will be used to create each column. For example, If you have a four column mega menu layout, there should be four direct children. The name of those items will then be shown as the column heading. Now you can add your menu items to each column by making them a child of the desired column (C).

No Column Heading

All you need to do to remove a column heading is make your column item (B) a custom link and set the name to a minus sign “-” When this indicator is used for a column heading, it will not be shown at the top of your column.

Multiple Column Headers

To achieve multiple columns headers, remove the default top one by using the method described above. That is, set your mega menu column item (B) to a custom link with the minus sign “-“.  Now you can add desired column headings to the item (C) and nest the items associated with that heading (D).