How to create mega menus in Divi

Group related links before opening Divi. A typical mega menu has one top-level trigger such as Services, followed by several parent categories, each with its own child links.

Keep the first level short and use clear category labels. A large menu becomes difficult to scan when every item is given the same visual weight.

Go to Appearance > Menus and create or edit the menu assigned to your Divi header. Add one top-level item to act as the mega menu trigger, then place category items beneath it and indent their related links beneath those categories.

For Divi 4, this hierarchy is what Divi uses to form the columns. Make sure the category items are siblings under the trigger rather than nested one inside another.

If you use Divi 5, build the menu in the Theme Builder with a Dropdown module inside the relevant link or navigation layout. Divi 5 allows you to design the dropdown with Divi content and create separate desktop and mobile arrangements.

With Divi 4, the built-in menu route is best for text links and simple columns. It does not provide the same visual control as a Divi Builder layout, so plan to use custom CSS or a plugin if the dropdown needs images, calls to action, or unusual layouts.

In the WordPress menu editor, open Screen Options and enable CSS Classes if the field is hidden. Expand the top-level trigger item and enter mega-menu in its CSS Classes field, then save the menu.

Divi’s native mega menu is activated by this class on the main menu item. The child structure remains important: the trigger must contain the category items, and each category must contain its own links.

Open the header in the Divi Theme Builder and use the Menu module’s design settings for fonts, colours, spacing, dropdown background, and mobile menu styling. Add custom CSS only after the hierarchy works.

Check the menu at desktop, tablet, and phone widths. Common failures include the CSS Classes field being disabled, the class being added to the wrong item, a submenu being indented at the wrong level, and custom CSS or cached Divi CSS hiding the dropdown. If changes do not appear, clear Divi’s static CSS cache and any caching plugin cache.

The native Divi 4 method is fine when you need a simple text-based mega menu. For multi-column layouts containing Divi Library layouts, images, icons, search, WooCommerce elements, animation, hover or click triggers, and separate responsive controls, a dedicated plugin avoids building and maintaining the extra CSS and layout work.

Supreme Mega Menu For Divi Pro adds those controls to Divi menus and supports horizontal and vertical layouts, responsive settings, badges, animations, custom media, and Divi or third-party modules. Add it after confirming the native route cannot provide the content or behaviour your header needs.