Navigation — Multi-column drop-down menus

In This Article

    How to set up multi-column drop down menus?

    When editing the main navigation in the WordPress menu editor, click the item you’d like to open up a multi-column drop-down menu and type in “mega-menu” in the CSS Classes box, as you can see in this screenshot:

    Then start organizing your multi-level navigation menu:

    How to display two menus in row like the demo example?

    When editing the main navigation in the WordPress menu editor, click the item you’d like to display like the example below and type in “upper” in the CSS Classes box. Keep in mind that the menu item called “SHOP — PAGES” is not a parent for the items underneath it.

    Cannot find the CSS Classes field?

    Head on to the “Screen Option” button at the top of the page and make sure the “CSS Classes” filed is checked to be shown on the screen.

    How to add a background image in the drop-down?

    For the items set to display a multi-column drop-down menu, you can set a background image. Simply paste in the image URL in the Background URL box.