How to Make Dropdowns Display in Columns of 2 or More

Last updated: May 18, 2026

By default Aurora’s navigation dropdowns display as a single vertical list. You can turn any dropdown into a multi-column grid using CSS Grid. No plugin, no JavaScript. Just a few lines in Appearance → Customize → Additional CSS.

This applies to desktop dropdowns only. The mobile accordion menu uses a different structure and is unaffected.

Step 1: Find the Menu Item ID

Each top-level menu item in WordPress has a unique ID on its <li> element – something like menu-item-4626. You need this to target the right dropdown without affecting others.

Visit your site in the browser.
Right-click on the menu item whose dropdown you want to change.
Click Inspect (or Inspect Element).
Look at the <li> element in the panel – it will have an id attribute like id="menu-item-4626".
Note the full ID including the number.

Step 2: Write the Grid CSS

Use the menu item ID to target only that dropdown’s submenu. Add this in Appearance → Customize → Additional CSS.

Two-column dropdown

#menu-item-4626 > .sub-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
    padding: 20px;
}

Three-column dropdown

#menu-item-4626 > .sub-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 40px;
    padding: 30px;
}

Replace 4626 with your actual menu item ID. Adjust gap and padding values to taste.

Step 3: Reset Item Separators (Elegant Header Only)

If you are using the Elegant header layout, Aurora adds a border-top and padding-top to every submenu item except the first. In a single-column list this creates a clean separator between items, but in a grid, items in the first row (except the very first item) will have an unwanted top border.

You need to unset these on the items that sit in the first row of your grid. For a 2-column grid that means the second item; for a 3-column grid it is the second and third items.

Reset for a 2-column grid

#menu-item-4626 > .sub-menu > li:nth-child(2) {
    border-top: unset;
    padding-top: revert;
}

Reset for a 3-column grid

#menu-item-4626 > .sub-menu > li:nth-child(2),
#menu-item-4626 > .sub-menu > li:nth-child(3) {
    border-top: unset;
    padding-top: revert;
}

The pattern is: reset every item from :nth-child(2) up to :nth-child(n) where n equals your column count. Those are the items in the first row that would otherwise inherit the separator styling.

If you are not using the Elegant header, skip this step entirely. No other Aurora header layout adds these separators to submenu items.

Putting It All Together

A complete example for two different menu items, one with 2 columns and one with 3, on the Elegant header:

/* 2-column dropdown */
#menu-item-4626 > .sub-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
    padding: 20px;
}

/* 3-column dropdown */
#menu-item-4627 > .sub-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 40px;
    padding: 30px;
}

/* Reset first-row separators - Elegant header only */
#menu-item-4626 > .sub-menu > li:nth-child(2),
#menu-item-4627 > .sub-menu > li:nth-child(2),
#menu-item-4627 > .sub-menu > li:nth-child(3) {
    border-top: unset;
    padding-top: revert;
}

Notes

Each menu item on your site has a different ID. Check the inspector for each dropdown you want to convert.
The > .sub-menu selector targets only the direct child submenu. Nested dropdowns within the grid are not affected.
These styles apply to desktop only. The mobile accordion drawer is unaffected.

You need a primary menu assigned before dropdowns appear. The submenu layout also depends on which header layout is active. The Elegant header adds item separators that require the extra reset CSS above.

#header #menu #custom-css #advanced #code-required

Previous ← How to Use Aurora’s CSS Variables to Override Site Content

Next How to Reverse the Order of Header Columns and Rows →