Divi (ElegantThemes)

Knowledgebase Docs » UberMenu 3
USEFUL? 72
UberMenu 3

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.

To resolve this, you can either (1) use Manual Integration to replace the two menus with just UberMenu (recommended), or (2) you can add CSS to force Divi to show UberMenu rather than its responsive menu (no longer recommended due to excessive residual styling in newer versions).

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.

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.

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 ( '' == $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 -->

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 ( '' == $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; ?>

UberMenu Settings & CSS Tweaks

Divi’s header does not flow naturally, so we need to make some adjustments.

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;
}

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-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%;
}
#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)