Style a Mega Menu
Overview
Style the contents of the panel in the Visual Builder. Style how the panel opens (position, delays, triangle, close icon, badges) on the mega menu under Mega Menu Settings.
Site-wide header, Ajax Loaded, and mobile options are in Settings.
Visual Builder
Open the mega menu with Edit with Divi and style sections, rows, and modules as on any Divi layout. Module-specific options are in Modules.
Style — Basics
| Setting | What it does |
|---|---|
| Menu Position | Default Menu (under the nav item) or Tooltip. |
| Tooltip Position Direction | Top or bottom when position is Tooltip. |
| Menu Activate | Hover or click. |
| Entrance Menu Animation | Fade Bottom, Fade Left, Fade Right, Slide Down, Fade In, Flip In X, Flip In Y. |
| Animation Duration | Length of the entrance animation (seconds). |
| Full Width | Stretch the panel to the viewport width. |
| Custom Width | Width in pixels when Full Width is off. |
| Disable On Mobile | Hide this mega menu on mobile (overrides showing it below the site breakpoint). |
Style — Menu Badge
| Setting | What it does |
|---|---|
| Show Badge | Small label on the assigned menu item (for example Sale or New). |
| Badge Text | Label text. |
| Badge Background / Badge Text Color | Colors. |
| Badge Font Size | Size in pixels. |
| Badge Position | After title, top right, or top left. |
| Badge Corner Radius | Corner rounding in pixels. |
You can also set a simpler badge on Appearance → Menus for that item.
Style — Advanced position
| Setting | What it does |
|---|---|
| Open Hover Delay Time | Delay before the panel appears (ms). |
| Close Hover Delay Time | Delay before it hides (ms). |
| Close on Scroll | Close the panel when the page scrolls. |
| Menu Relative Position | Open under the parent item (on by default). |
| Adjust From Left / Adjust From Top | Extra offset in pixels. |
| Change top position on scroll? | Different top offset after scroll. |
| Adjust From Top Mobile | Top offset on mobile (px). |
Triangle
| Setting | What it does |
|---|---|
| Triangle Above Menu | Show a pointer above the panel or on the menu link. |
| Triangle Location | On Mega Menu or On Menu Link. |
| Triangle style | Presets such as diamond, caret, rounded, wide, or arrow. |
| Turn Into Underline | Underline the menu link instead of a triangle (location must be On Menu Link). See Underline Active Menu Item. |
| Triangle Color | Color of the triangle or underline. |
| Triangle/Underline Height | Height in pixels. |
| Distance From Top / Distance Left/Right | Position offsets. Left/Right does not apply to underline mode. |
Close Icon
| Setting | What it does |
|---|---|
| Show Close Icon | Show a close control on the panel. |
| Icon | Icon picker, plus optional custom Elegant Icons code. |
| Close Icon Color / Font Size | Appearance. |
| Distance From Top / Distance From Right | Position on the panel. |
Save the mega menu after you change these options.
Divi 4
The same groups exist on Divi 4 mega menu posts. Icon fields may use Elegant Icons codes instead of the Divi 5 icon picker. Badges and Global Canvas are documented for the current plugin UI.