This tutorial covers integrating with the standard Divi theme header. If you are using the Divi Theme Builder to control your header layout, you can integrate UberMenu much more easily using a Divi Code Module and the UberMenu shortcode within the Divi Builder. Please see the Divi Builder Guide for detailed instructions.
Overview
Divi uses a two-menu system (one for desktop, one for mobile). On mobile, Divi will hide UberMenu and show its default responsive menu, which will result in a non-functional mobile menu. On desktop, the Divi CSS interferes and breaks the menu due to residual styling.
To resolve this, we’ll use Manual Integration to replace the two menus with just UberMenu. Then we’ll add some CSS to wrangle the header elements at different viewport resolutions.
Please note that the Divi mobile menu is dependent on its desktop menu. So if we replace one, we have to replace both – i.e. it’s not possible to use UberMenu on desktop and Divi’s menu on mobile (at least efficiently and without much additional customization).
Manual Integration
Remember to always make your changes in a child theme, so that they will be preserved when you update. You should install and activate a Divi child theme before proceeding. (This site offers a blank Divi child theme if you need. Another option.)
Overview: First, we’ll replace the theme’s menu with UberMenu via manual integration. Then we’ll make some settings and CSS tweaks to make things play nicely with the theme’s header layout and UberMenu. Finally, we’ll make some adjustments for the mobile menu.
Replace the theme’s menu with UberMenu
1. Copy the header.php file from Divi to your child theme
Always make changes in the child theme to preserve them when you update Divi in the future.
Note: if you’re using Divi v4 with its Builder, you may need to edit the theme-header.php file instead. If you’re controlling your header with the builder directly, then you can just replace your menu with UberMenu in the builder.
2. Find the theme’s menu
Locate the #et-top-navigation block in the child theme’s header.php, which we will be conditionally replacing
<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 ( empty( $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 et_core_esc_wp( $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
/**
* Fires at the end of the 'et-top-navigation' element, just before its closing tag.
*
* @since 1.0
*/
do_action( 'et_header_top' );
?>
</div> <!-- #et-top-navigation -->
3. Replace the theme menu
Conditionally replace the theme’s menu with UberMenu manual integration:
<?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 ( empty( $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 et_core_esc_wp( $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
/**
* Fires at the end of the 'et-top-navigation' element, just before its closing tag.
*
* @since 1.0
*/
do_action( 'et_header_top' );
?>
</div> <!-- #et-top-navigation -->
<?php endif; ?>
UberMenu Settings & CSS Tweaks
Divi’s header does not flow naturally, so we need to make some adjustments. CSS can be added in the CSS Tweaks.
1. Align menu right
This may vary depending on your header type, but if you want the logo on the left and the menu on the right, set the Menu Bar Alignment to “Right” in the Control Panel.
2. Logo Position
By default the theme’s logo is positioned absolutely, causing a flow issue. Position it relatively by adding this CSS in your CSS Tweaks:
.et_header_style_left div.logo_container{
position:relative;
padding:20px 0;
width:auto;
height:auto;
float:left;
}
.et_menu_container .logo_helper{
display:none;
}
Note: if the image you have uploaded for your logo is larger than you want it to display, set the width property to an explicit value above to shrink the logo.
3. Submenu Width
Set your Bound Submenu To setting to “Unbounded” to allow the submenu to expand to the width of your content.
4. Top Level Vertical Padding
In the Customizer, adjust your Top Level Vertical Padding to align the menu items with your logo.
5. Sticky header reduced height
If you’d like to reduce the menu and logo size when the theme’s header becomes sticky, you can use some CSS like this
.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;
}
Adjust the width and padding appropriately for your needs.
Mobile Menu
1. Align toggle right
In the Customizer, set the Responsive Toggle Alignment to “Right”. You can also adjust the font size if you’d like to make the toggle larger
2. Top Level Padding
You may want to reduce the padding on mobile by adding this CSS in your Mobile CSS Tweaks
.ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
padding-top:15px;
padding-bottom:15px;
}
3. Logo Position
If you want to position the theme’s logo beside the toggle button, you can try adding this in the Mobile Custom Tweaks
#main-header .logo_container{
float:left;
max-width:50%;
height:auto;
position:relative;
}
#main-header #logo{
max-width:100%;
}
4. Responsive Toggle Clickability
If your theme’s logo is absolutely positioned, it’ll overlap the responsive toggle and prevent you from clicking it. If you are not using the above code, you can use this to place the responsive toggle over the logo:
.ubermenu-responsive-toggle{
position:relative;
z-index:40;
}
You may also wish to position the menu absolutely on mobile, so that it doesn’t change the size of your header area when toggled open (which will adjust the position of the Divi logo due to how that is coded in the theme)
.ubermenu.ubermenu-main{
position:absolute;
top:52px;
}
Note that the ‘top’ value may need to be adjusted for your specific site.
5. Full Width Menu Bar
If you are using a full width menu, Divi will prevent it from reaching the extents of the viewport due to the padding it adds to the container. You can override this by adding
.et_fullwidth_nav header#main-header .container{
padding:0;
}
in your CSS Tweaks to allow the menu to expand to the full extents of the browser window.
(Note, you need to have the full width menu below the logo configured in the Divi settings)
6. Hide Divi’s Burger Toggle
If you see an extra burger/toggle, add this CSS to hide it:
div#et_mobile_nav_menu{
display:none;
}
7. Recommended: Modal Menu
It is not required, but we recommend using the Modal Mobile Menu Display Mode with Divi. You can also change the Mobile Submenu Type to Accordion.