Creating Mega Menus In Divi

Mega menus are a great way to consolidate your excessive menu items.

Cristi avatar
Written by Cristi
Updated over a week ago

Mega menus allow users to see more links all at once without the hassle of scrolling, hovering, and remembering the contents of your menu. 

A good way to think about Mega Menus is that they are drop-down menus within drop-down menus. 

How To Add A Mega Menu To Your Navigation Bar

Log in to your WordPress dashboard and go to Appearances > Menus.

Step 1. Create a menu with four parent links, with each of the parent links having their submenu links. In the example below, I’m adding three submenu items under each of the four parent menu links.

Step 2: Create an additional link to serve as your megamenu link. For the example below, I’m calling this link “Features.” Then drag the four parent menu links (each with submenu links) under the Features link.

Step 3. To make your Megamenu, you must add a special CSS class to the main top-tier link called “Features.” You can do that by clicking the screen options link at your page's top and ensuring the CSS class option is checked.

Step 4. Set the css class to the “Features” link you created. Click the arrow on the right of the “Features” menu item to toggle the additional configuration options. Find the text box labeled CSS Classes and enter the class mega-menu.

When you reload your page, you can see that all those previous menus have been placed in the one giant menu under this link, the Mega Menu.

Did this answer your question?