Mega Drop-down
This reference is for Divi 5. For Divi 4, see Mega Drop-down Module under Modules → Divi 4.
Purpose and when to use
Mega Drop-down (de-mega-menu/mega-dropdown) shows a WordPress menu as a nested list inside the mega menu panel. Parent items drill into sub-menus. Use it for category trees that should stay a menu, not a custom grid.
Add it from the Divi Mega Menu folder while editing a mega menu in the Visual Builder.
Use this module on a mega menu assigned to a WordPress menu item. It is not supported on tooltip-only CSS class triggers.
Before you configure this module
- A WordPress menu exists under Appearance → Menus.
- You are editing a mega menu (or a layout used as the panel) in the Visual Builder.
Quick setup
- Add Mega Drop-down.
- Set Select Menu to the WordPress menu.
- Set Menu appear from (Left or Right) and Max-width.
- Choose Parent Menu Icon and Back Menu Icon.
- Style fonts under Parent Menu Item, Sub-Menu Item, and Active Menu Item.
Content tab
| Group | What it configures |
|---|---|
| Module Options | Which WordPress menu to show, max-width, appear-from side |
| Icon | Parent and back icons |
| Background / Link / Admin Label | Standard Divi groups |
Core settings
| Setting | Type | Default | Notes |
|---|---|---|---|
| Select Menu | select | none | WordPress menu to render |
| Max-width of menu and sub-menus | text | 500 | Include a CSS unit (px, %, vw) or calc() |
| Menu appear from | select | Right | Left or Right |
| Parent Menu Icon | icon | Divi default | Shown on parents that have children |
| Back Menu Icon | icon | Divi default | Returns from a nested level |
Divi 4 required Elegant Icons unicode without &#x. Divi 5 uses the icon picker.
Design tab
| Group | What it configures |
|---|---|
| Parent Menu Item | Font styles for top-level links |
| Sub-Menu Item | Font styles for nested links |
| Active Menu Item | Font styles for the current page item |
| Spacing, border, box shadow, background | Module chrome |
Parent and sub-menu item colors, padding, and borders are also available next to those groups.
Overlay
To overlay the drop-down on surrounding mega menu content, add the CSS class dmm-overlay on the relevant menu item (same as Divi 4).