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.
<div id="et-top-navigation" data-height="<?php echo esc_attr( et_get_option( 'menu_height', '66' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'minimized_menu_height', '40' ) ); ?>"> <?php if ( ! $et_slide_header || is_customize_preview() ) : ?> <nav id="top-menu-nav"> <?php $menuClass = 'nav'; if ( 'on' == et_get_option( 'divi_disable_toptier' ) ) $menuClass .= ' et_disable_top_tier'; $primaryNav = ''; $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'top-menu', 'echo' => false ) ); if ( '' == $primaryNav ) : ?> <ul id="top-menu" class="<?php echo esc_attr( $menuClass ); ?>"> <?php if ( 'on' == et_get_option( 'divi_home_link' ) ) { ?> <li <?php if ( is_home() ) echo( 'class="current_page_item"' ); ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'Divi' ); ?></a></li> <?php }; ?> <?php show_page_menu( $menuClass, false, false ); ?> <?php show_categories_menu( $menuClass, false ); ?> </ul> <?php else : echo( $primaryNav ); endif; ?> </nav> <?php endif; ?> <?php if ( ! $et_top_info_defined && ( ! $et_slide_header || is_customize_preview() ) ) { et_show_cart_total( array( 'no_text' => true, ) ); } ?> <?php if ( $et_slide_header || is_customize_preview() ) : ?> <span class="mobile_menu_bar et_pb_header_toggle et_toggle_<?php echo esc_attr( et_get_option( 'header_style', 'left' ) ); ?>_menu"></span> <?php endif; ?> <?php if ( ( false !== et_get_option( 'show_search_icon', true ) && ! $et_slide_header ) || is_customize_preview() ) : ?> <div id="et_top_search"> <span id="et_search_icon"></span> </div> <?php endif; // true === et_get_option( 'show_search_icon', false ) ?> <?php do_action( 'et_header_top' ); ?> </div> <!-- #et-top-navigation →
The above code will be replaced by the following:
<?php if( function_exists( 'ubermenu' ) ): ?> <?php ubermenu( 'main' , array( 'theme_location' => 'primary-menu' ) ); ?> <?php else: ?> <div id="et-top-navigation" data-height="<?php echo esc_attr( et_get_option( 'menu_height', '66' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'minimized_menu_height', '40' ) ); ?>"> <?php if ( ! $et_slide_header || is_customize_preview() ) : ?> <nav id="top-menu-nav"> <?php $menuClass = 'nav'; if ( 'on' == et_get_option( 'divi_disable_toptier' ) ) $menuClass .= ' et_disable_top_tier'; $primaryNav = ''; $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'top-menu', 'echo' => false ) ); if ( '' == $primaryNav ) : ?> <ul id="top-menu" class="<?php echo esc_attr( $menuClass ); ?>"> <?php if ( 'on' == et_get_option( 'divi_home_link' ) ) { ?> <li <?php if ( is_home() ) echo( 'class="current_page_item"' ); ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'Divi' ); ?></a></li> <?php }; ?> <?php show_page_menu( $menuClass, false, false ); ?> <?php show_categories_menu( $menuClass, false ); ?> </ul> <?php else : echo( $primaryNav ); endif; ?> </nav> <?php endif; ?> <?php if ( ! $et_top_info_defined && ( ! $et_slide_header || is_customize_preview() ) ) { et_show_cart_total( array( 'no_text' => true, ) ); } ?> <?php if ( $et_slide_header || is_customize_preview() ) : ?> <span class="mobile_menu_bar et_pb_header_toggle et_toggle_<?php echo esc_attr( et_get_option( 'header_style', 'left' ) ); ?>_menu"></span> <?php endif; ?> <?php if ( ( false !== et_get_option( 'show_search_icon', true ) && ! $et_slide_header ) || is_customize_preview() ) : ?> <div id="et_top_search"> <span id="et_search_icon"></span> </div> <?php endif; // true === et_get_option( 'show_search_icon', false ) ?> <?php do_action( 'et_header_top' ); ?> </div> <!-- #et-top-navigation --> <?php endif; ?>
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.
.et_header_style_left div.logo_container {
position: relative;
padding: 20px 0;
width: auto;
height: auto;
float: left;
}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:
.et-fixed-header .et_menu_container .logo_container {
padding-top: 0;
padding-bottom: 0px;
width: 100px;
}
.et-fixed-header .et_menu_container .logo_helper {
display:none;
}
.et-fixed-header .ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{
padding-top:27px;
padding-bottom:27px;
}Align the items in your menu with the logo in the Customizer with this code. Adjust the code to your needs.
display: none;
}
.et-fixed-header .ubermenu-main .ubermenu-nav
.ubermenu-item.ubermenu-item-level-0> .ubermenu-target {
padding-top: 27px;
padding-bottom: 27px;
}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:
# main-header .logo_container {
float: left;
max-width: 50%;
}
# main-header #logo {
max-width: 100%;
}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:
.ubermenu-responsive-toggle {
position: relative;
z-index: 40;
}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:
.ubermenu.ubermenu-main {
position: absolute;
top: 52px;
}If you want to reduce the top level padding in the mobile version of your website, use this code:
.ubermenu.ubermenu-main .ubermenu-item-level-0> .ubermenu-target {
padding-top: 15px;
padding-bottom: 15px;
}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:
.et_fullwidth_nav header # main-header .container {
padding: 0;
}