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:

  1. In your WordPress admin, go to Appearance > Menus and change the Event to ‘Click’.
  2. In the front end of your site, open the sub menu then right-click on the menu item and click “Inspect”.
  3. You should find an ID attribute that looks something like “mega-menu-item-25296”.
  4. 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!

Option 1: Horizontal Ordering

Option 2: Vertical Ordering

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