Mega Menus are a type of website navigation that drop-down as a wide section with navigation links grouped into sections and columns when a top-level menu item is clicked or hovered over.

The added size of mega menus means that they can also include images, icons, tool-tips, forms, or WordPress widgets in addition to the standard text links. The real benefit of using a mega menu is that you can display a large number of menu links in a single section so that site users can access them all without the need to scroll to click on long lists of links that may become hidden off-screen.

There is a mega menu included for free in the Divi Theme by default and for many, this is a good enough solution to add longer lists and batches of site links. If the built-in mega menu is not what you are looking for there are also a number of 3rd party plugins that can give extra functionality and/or design options not available in the Divi mega-menu.

This post will give you an introduction to the built-in and 3rd party mega menu options that are compatible with the Divi Theme.

Why use a mega menu?

A mega menu is a great way to improve the user experience for your site visitors and allow them to navigate your website faster and more intuitively. You may want to look at using a mega menu if;

  • The default drop-down menu or sub-menus has too many items to be viewed without scrolling the page
  • You have many products or product categories that need to be on a menu
  • You have many posts or pages that need to be on a menu
  • Having your site links in 1 mega menu will make it easier for users to find links and navigate your site

1. Default Divi Mega Menu

built in divi mega menu

 

Divi comes with an in-built mega menu that can be activated by adding a CSS class of mega-menu to a menu item in the WordPress dashboard menus section. This mega menu method is free, fast, and requires no additional coding or plugins.

Steps to add the default Divi mega menu;

  • Go to Appearances > Menus in your WordPress dashboard
  • Under “Screen Option” check the CSS Classes checkbox
  • Add a custom link to your menu and in the link settings for CSS Classes, add the class “mega-menu”. This is the link to open the mega menu.
  • Add up to 4 sub-links to the custom link you just added and any sub-sub links to those as required
  • Save your new  mega-menu

The default Divi mega-menu can have up to four columns, but as this tutorial on Divi Theme Examples shows, you can customize the menu columns for 6, 7 or 8 columns.

Price: FREE
More information

Mega menus plugins built for Divi

The default mega menu will give you enough tools to create a basic menu but if you need some extra features then these free and premium plugins are available too.

2. Divi Mega Menu (Divi Engine)

divi engine mega menu

Divi Mega Menu is a premium 3rd party Divi plugin sold by Divi Engine that allows you to add a mega-menu to Divi using the Divi Builder.

  • Create and modify the Mega Menu using the Divi Builder
  • Add any Divi module to the menu (including Divi BodyCommerce modules)
  • Control menu animation style and speed
  • 1-time payment

Various pricing options include 1 site license for $9.2, 2 to 5 site licenses for $23.5 (£18), and unlimited site licenses for $46 (£35).

Developer: Divi Engine
Price
: from $9 – 46 (Annual 1 Site £7, 2 – 5 Sites £18, Unlimited £35. Lifetime 1 Site £38. Unlimited £115)
More information

3. Mhmm. – Mighty Header & Menu Maker (Be Superfly)

be superfly mega menu plugin

Mighty Header & Menu Maker is a premium 3rd party Divi plugin sold by BeSuperfly that allows you to add a mega-menu to Divi using the Divi Builder + a range of custom Divi menu builder features.

  • Create Mega Menus using the Divi Builder
  • Demo Header Layouts
  • Swap Header, Menu, and logo per Page
  • Swap Header, Menu & Logo per Device
  • Includes many non-mega menu header options and features
  • 1-time payment

1 live and 1 development site license costs $35 and unlimited sites license costs $65.

Price: $35 – 65
More info

4. Divi Mega Pro

divi life mega menu

Divi Mega Pro is a premium 3rd party Divi plugin sold by Divi Life that allows you to add mega-menu and/or mega-tooltips to Divi.

  • Up or Down Display Direction (overridden if not enough room)
  • Activate on mouse hover or click
  • Exit on mouse hover or click
  • Set mouse hover exit delay
  • Add a customizable close button
  • Set the width of the menu or tooltip
  • Trigger with menu items or any element using Divi’s CSS classes
  • Predesigned templates included

Price: $79 per year with unlimited website usage, a 30-day money-back guarantee, and 1-year support & updates.
More information