Divi

Update October 2019 – Divi 4 released!

Divi 4 has been released and includes a new header builder, which gives you more flexibility on how your header is laid out and makes it a lot easier to integrate Max Mega Menu.

Divi 4 Header Builder instructions

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.

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 > Custom Styling and paste in the following.

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

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.

To correctly display the Max Mega Menu mobile menu on smaller screens when using the Full Width Menu module, go to Appearance > Customize > Additional CSS and add the following:

 

Related Articles