How to distribute sub menu items over multiple columns

These instructions apply to mega menus only.

Step 1: Find the parent menu item ID

In this example, we will distribute the “Installation”, “Mega Menus”, “Flyout Menus” and “Menu Item Options” menu items over 2 columns.

First, you will need to find the ID of the parent menu item (“Getting Started”). To find the menu item ID, right-click on the menu item and click “Inspect”. You should find an ID attribute that looks something like “mega-menu-item-25296”. In our case, 25296 is the ID of the “Getting Started” item.


Step 2: Apply Custom CSS

Go to Mega Menu > Menu Themes and enter the following CSS into the Custom Styling area.

Important: Make sure you update the ID in the CSS so that it matches the ID of your menu item from step 1!

Step 3: The result

After saving the theme you should find the sub menu items are distributed over 2 columns.

You can change the number of columns to distribute items across by changing the ‘width’ option in the custom CSS (3 columns = 33%, 4 columns = 25% etc).


Related Articles