Option 1 – Divi Child Theme

The default Divi menu is tightly integrated into the theme. This makes it more difficult than usual for Max Mega Menu to automatically override the default menu system.

It is highly recommended to use the Divi Child Theme below.

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

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

In your WordPress Dashboard, go to Mega Menu > Menu Themes, select your active menu theme and insert one or all of the¬†following options into the ‘Custom Styling’ area on a new line.

Fix Mobile Menu

This CSS will hide the native Divi Mobile Menu and properly display the Max Mega Menu 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 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 (set under Appearance > Menus).

Full Width Menu

To make the primary menu full width (so that it sits underneath the logo), add the following CSS.

Full Width Mobile Menu

Add the following CSS:

Display Secondary Menu on Mobiles

The secondary menu is hidden by default on mobiles. To make it display again, add the following CSS.

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 and insert the following into the Custom CSS area:

Unstick Header at certain browser width

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