Skip to main content

Assigning a Mega Menu

Overview​

The layout does not appear until it is attached to a trigger. On Divi 5, pick the WordPress menu and item. The custom identifier CSS class method still works for Divi 4 and for tooltip-style triggers.

Use pages with the Default Template unless you have a Theme Builder template that already includes the header.

Divi 5: assign from the mega menu​

  1. Edit the mega menu.
  2. In the sidebar, choose WordPress menu.
  3. Choose Menu item.
  4. Update the mega menu.

Assign Menu Mega Menu writes the identifier onto that item. You can change the assignment later from the same screen.

Divi 5: assign from Appearance → Menus​

Mega Menu in WP Menu

  1. Go to Appearance > Menus.
  2. Expand the parent item that should open the panel.
  3. In Mega Menu, choose the mega menu (or None — normal menu link to clear it).
  4. Optionally enable Show menu badge and set badge text and colors. Full badge styling is on the mega menu Style tab.
  5. Save the menu.

In Divi Engine > Mega Menu Settings, open General and confirm Navigational Header matches how your header is built. Keep Default Divi when you use the theme header or when a Theme Builder global header is already applied. See Settings.

Divi 4 and CSS class assignment​

This method still works on Divi 5 if you prefer it, and it is the usual Divi 4 workflow.

  1. Copy the mega menu Custom Identifier.
  2. Go to Appearance > Menus.
  3. Enable CSS Classes under Screen Options. Enable CSS classes
  4. On the parent item, paste the identifier into CSS Classes.
  5. Save the menu.

Add custom identified as CSS class

The identifier must match exactly (letters, numbers, underscores; no spaces).

Tooltip trigger (CSS class on a module)​

You can open a mega menu from a Divi module (for example a button) instead of a WordPress menu item:

  1. Set Menu Position to Tooltip on the mega menu (see Style a Mega Menu).
  2. On the trigger module, open Advanced and add the custom identifier as a CSS Class.
note

Mega Tabs and Mega Drop-down are supported on mega menus assigned to a WordPress menu item, not on tooltip-only triggers.

What's Next​