Quick start guide

Divi 5 only

This quick start uses Divi 5 assignment (menu + menu item pickers). Divi 4 uses the same mega menu posts, but you typically assign by adding the custom identifier as a CSS class on the menu item. See Assigning a Mega Menu.

Overview

Create one mega menu layout, assign it to a parent item in a WordPress menu, and open it on the front end.

Prerequisites

• Divi Mega Menu installed, activated, and licensed.
• A WordPress menu with at least one item (for example, Shop or Services).
• Latest version of Divi 4 or Divi 5.
• Access to Divi Engine and Appearance → Menus.

Step 1: Confirm header settings

1. Go to Divi Engine > Mega Menu Settings.
2. On Setup, follow the checklist if it suggests a Navigational Header or load method.
3. Open General and confirm Navigational Header:
   • Default Divi (theme header) for the theme header.
   • Leave Default Divi if you already use a Theme Builder global header — Mega Menu detects that header automatically.
   • Change the setting only if the panel sits in the wrong place (Theme Builder, per-page Menu module, or Mighty Header & Menu Maker).
4. Click Save.

Step 2: Create a mega menu

1. Go to Divi Engine > Mega Menu > Add New.
2. Enter a title (for example, Shop mega menu).
3. Set Custom Identifier (letters, numbers, and underscores only, for example shop_mega). The identifier is filled from the title if you leave it empty and blur the title field.
4. Under Mega menu content, keep This Mega Menu (you will design this post). Optionally choose Global Canvas later if the panel should reuse a Theme Builder canvas.
5. Publish the mega menu.

Step 3: Design the panel

1. Click Edit with Divi on the mega menu.
2. Add a section and row.
3. Add ordinary Divi modules (text, images, buttons) and, if needed, Mega Tabs or Mega Drop-down from the Divi Mega Menu folder.
4. Save the layout.

Step 4: Assign it to a menu item

Divi 5

On Divi 5, assign from the mega menu editor or from a Mega Menu dropdown on Appearance → Menus. On Divi 4, add the custom identifier as a CSS class instead.

Divi 5 — on the mega menu (recommended)

1. In the mega menu editor sidebar, choose WordPress menu.
2. Choose Menu item.
3. Update the mega menu. The plugin writes the identifier onto that item.

Divi 5 — on Appearance → Menus

1. Go to Appearance > Menus.
2. Expand the parent item.
3. Choose the mega menu in the Mega Menu dropdown.
4. Save the menu.

Divi 4 — CSS class

1. Copy the mega menu Custom Identifier.
2. Go to Appearance > Menus.
3. Enable CSS Classes under Screen Options.
4. Paste the identifier on the parent item’s CSS Classes field.
5. Save the menu.

Full steps for both versions are in Assigning a Mega Menu.

Step 5: Preview

1. Open the site on the front end.
2. Hover or click the assigned parent item (depending on Menu Activate on the mega menu).
3. Confirm the layout appears under the header.

If the panel is missing or misaligned, see Mega Menu Is Not Showing and Settings.

What's Next

• Creating a Mega Menu — Identifiers, Global Canvas, and Visual Builder details.
• Assigning a Mega Menu — Divi 5 pickers, CSS class assignment, and tooltip triggers.
• Style a Mega Menu — Position, animation, triangle, close icon, and badges.
• Modules — Mega Drop-down, Mega Tabs, and Tab.