Integrate UberMenu to your Mega Divi Menu

We love mega menus! UberMenu offers a good option. Although Divi is a theme that allows fairly smooth and harmonious integrations, for those who prefer to use UberMenu, they can see certain difficulties when viewing their active menus in the mobile and desktop versions. In the mobile version, Divi will hide UberMenu to show in its place the mobile responsive menu that it has by default. In the desktop version, Divi will interfere with the menu and will not display correctly.

Then what do we do? You have the option to manually integrate UberMenu in order to replace the Divi menu with UberMenu, or you can add CSS to force Divi to display UberMenu instead of the default responsive menu. This last option is not the most recommended because of the excess of residual styles.
Manual integration of UberMenu and Divi

With this procedure, we will integrate UberMenu manually and work with CSS to make adjustments and everything is harmonious. Come on!

Remember to always make these changes in a child theme to avoid errors or lose information at the time of the update.

Change the Divi Menu by UberMenu

The first thing we should do is copy the header.php file from Divi to your child theme, which is the one we will work on.

Find the # et-top-navigation block in the header.php file. The code below will be replaced with the code following it.

The above code will be replaced by the following:

Adjust CSS in the Desktop version

After replacing the codes, we will add some details in CSS to ensure that everything is displayed in order.

Align the menu bar to the right on the control panel. Place the logo on the left with the following CSS.

Adjust the width of the submenu to the same width as the mega menu by selecting the “Unbounded” option.

If you want to reduce the height of the fixed header and the size of the logo, insert this CSS:

Align the items in your menu with the logo in the Customizer with this code. Adjust the code to your needs.

Adjust CSS in the Mobile version

Align the toggle to the right in the Customizer. You can also adjust the font size if you want it to look bigger.
Position the logo next to the toggle button with the following code:

It is possible that the logo overlaps the toggle, so if you have not used the previous code, you can try the code below to make it possible to click on the responsive toggle:

If your mobile menu is positioned absolutely and you do not want to change the size of the header, use this code and adjust it according to your needs:

If you want to reduce the top level padding in the mobile version of your website, use this code:

If you are using a full-width menu, Divi may prevent the menu from extending due to padding. First, you must configure the full-width menu in the Divi settings. You can solve it with this code:

Do you use UberMenu or do you plan to use it? Tell us what other Mega Menu you use!