Divi MadMenu

A header is designed twice, once per device

You finish the header on the desktop and it looks clean: logo, six links, search, cart. You open the phone and all of that piles into one bar where every link is a tiny target for a finger.

The point where your header stops being a desktop header and becomes a mobile one is yours to decide, and each side needs its own structure, not the same one squeezed.

Divi MadMenu adds menu modules and navigation controls for headers to the Divi builder. It lets you set custom breakpoints between desktop and mobile, use different navigation on each device and adjust, element by element, the label, visibility, order, width and alignment for each screen.

Menu modules and panels for the header

• Desktop headers: built from menus, buttons, icons, search, cart and more, horizontal or vertical.
• Mega menus: several columns with grouped links and custom content.
• Dropdowns: you choose which way they open and customize the pointer.
• Mobile menus: submenus can be collapsible, accordion or sliding.
• Popup panels: header popup, slide-in, fullscreen or off-canvas panel, with the position and the opening and closing animations of your choice.
• Fixed header: changes logo, style and behavior as the visitor scrolls down, and highlights the menu item matching the part of the page they are on.
• Buttons by login state: a button can show different content to logged-in and logged-out visitors.
• Header templates: starting points you then customize inside Divi.

A store header with a live cart and search

One possible setup: a header for a WooCommerce store with a cart that updates live, live product search and a button that shows one text to someone who already has an account and another to someone who does not. It is a combination of features worth testing on your site before publishing, especially on mobile.

For that setup, the live cart depends on WooCommerce and the live product search uses FiboSearch. Menus and panels are styled separately: links, the dropdown panel and the content of each submenu have their own settings.

Panels can stop the page behind them from scrolling while they are open, and mobile and popup menus close when you tap outside or tap a link.

Dependencies and features by version

MadMenu is built for the Divi Builder and the Theme Builder, for global headers and for those of a specific page. Outside that environment it has nowhere to apply.

Nested Divi elements and the customizable dropdown pointer are designed for the most recent version of Divi.

Building the first header, step by step

To start you need the Divi builder active on your site and, if you want a live cart, WooCommerce.

1. Install the plugin with the WordPress installer and activate it.
2. Open the Divi Theme Builder and edit the global header template or the one for a specific page.
3. Add the MadMenu menu module or start from a header template.
4. Set the breakpoints between desktop and mobile and the type of mobile submenu.
5. Check each device, adjust which elements show and in what order, and save.

Menus and headers to compare

If you are looking for other ways to handle mobile navigation in Divi, look at Divi Mobile Menu. If your site does not depend on Divi and you want mega menus in WordPress, check Max Mega Menu Pro.

Answers about Divi MadMenu

Can I use different menus on desktop and mobile?

Yes. Navigation can be configured differently per device, with custom breakpoints.

Can I build a mega menu with it?

Yes. It supports multi-column mega menus with grouped links and custom content.

What happens to the mobile menu when a link is tapped?

Mobile menus and popup panels can close when you tap outside or tap a link.

Do I need WooCommerce?

Only if you want the live cart. Live product search additionally uses FiboSearch.