Divi

Before you start

We have many users who use Max Mega Menu with Divi with no issues at all, however some users find it more difficult to integrate with than we would like. The Divi Menu has many more options than most themes, each tightly integrated with other areas of the theme. This makes it a lot more difficult to integrate Max Mega Menu with Divi than it is with other themes.

Due to the way Divi is coded, it is not possible to replace the desktop menu with Max Mega Menu and keep the Divi Mobile Menu – both the desktop and mobile menu will be replaced with Max Mega Menu.

If you are planning on purchasing the Pro addon, we request you try the free version of Max Mega Menu (and make sure you are happy with it) before upgrading to Pro. The Pro addon will not change the base functionality of Max Mega Menu.

If you just want to create mega sub menus using Divi then we recommend using functionality built into Divi.

Option 1 – Divi Child Theme

Use this option if you are creating a new site from scratch. If you want to integrate Max Mega Menu into an existing site, scroll down to “Option 2 – Manual Integration”.

Step 1

Download and install the Divi Child Theme:

Divi Max Mega Menu – Child Theme

Step 2

Go to Appearance > Menus and select ‘Divi’ as the menu theme.

Step 3

Use the “Make Full Width” and “Hide Logo” options under Customize > Header and Navigation > Primary Menu Bar to customize the position of the menu.


Option 2 – Manual Integration

Pick and choose the following options as needed.

Fix Mobile Menu

The Divi mobile menu is coupled with the Divi desktop menu, therefore it is not possible to keep the Divi Mobile Menu if the desktop menu is replaced with Max Mega Menu.

The following CSS will hide the native Divi Mobile Menu and properly display the Max Mega Menu mobile menu.

From your WordPress Dashboard, go to Mega Menu > Menu Themes, select your active menu theme and insert the following into the ‘Custom Styling’ area on a new line.

If you do not like the Max Mega Menu mobile menu, you can try using a different plugin for the mobile menu.

Full Width Sub Menus

To make the mega menu drop downs span the entire width of the page (rather than just the width of the menu), go to Mega Menu > Menu Themes > Mega Menu and set the following values:

Panel Width (Outer):

Panel Width (Inner):

Depending on how Divi is set up it will override the mega menu dropdown effect.

Go to Appearance > Customize > Header & Navigation > Primary Menu Bar. Set “DROPDOWN MENU ANIMATION” to “Fade”. This should stop divi from overriding the mega menu effect.

Full Width Menu

To make the primary menu full width (so that it sits underneath the logo), go to Appearance > Customize > Additional CSS and insert the following:

Full Width Mobile Menu

From your WordPress Dashboard, go to Appearance > Customize > Additional CSS and insert the following:

Display Secondary Menu on Mobiles

The secondary menu is hidden by default on mobiles. To make it display again, go to Appearance > Customize > Additional CSS and insert the following:

Hide Theme Logo on Mobile

If you want to display your logo as a mobile toggle block rather than using the standard theme logo, go to Mega Menu > Menu Themes > Custom Styling and insert the following:

Fix “Full Width Menu” module

By default, when using the full width menu module in Divi, the Primary Menu will always be displayed regardless of the menu selected in the module settings. To fix this add the following to the bottom of your themes functions.php file:

Note: always be careful when editing theme PHP files. Double check the pasted code matches exactly what you see below before saving the file.

Article Attachments

Related Articles