Extra will cause significant residual styling, so we’ll need to use Manual Integration to replace the theme’s menu with UberMenu to prevent the theme from interfering. Then we will add some styling and tweak some Configuration settings to merge the look and feel with Extra.
Manual Integration
Please note, if you are using the theme builder to control your site layout, but not the header layout builder, you may need to integrate in the theme-header.php file instead of the header.php. The code and process is the same, just a different file. If you are using the builder to control your header layout, you can integrate UberMenu following the Divi Builder (Elegant Themes) guide instead, by adding UberMenu directly in the theme builder rather than editing the PHP template.
1. First, create a child theme and copy the header.php into the child theme to preserve the changes we’ll be making.
2. Find the theme’s menu in the child theme header.php, it looks like this:
<!-- ET Navigation -->
<div id="et-navigation" class="<?php echo $et_navigation_classes; ?>">
<?php
$menu_class = 'nav';
if ( 'on' == et_get_option( 'extra_disable_toptier' ) ) {
$menu_class .= ' et_disable_top_tier';
}
$primary_nav = wp_nav_menu( array(
'theme_location' => 'primary-menu',
'container' => '',
'fallback_cb' => '',
'menu_class' => 'nav',
'menu_id' => 'et-menu',
'echo' => false,
'walker' => new Extra_Walker_Nav_Menu,
'header_search_field_alone' => $header_vars['header_search_field_alone'],
'header_cart_total_alone' => $header_vars['header_cart_total_alone'],
) );
if ( !$primary_nav ) {
?>
<ul id="et-menu" class="<?php echo esc_attr( $menu_class ); ?>">
<?php if ( 'on' == et_get_option( 'extra_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', 'extra' ); ?></a></li>
<?php }; ?>
<?php show_page_menu( $menu_class, false, false ); ?>
<?php show_categories_menu( $menu_class, false ); ?>
</ul>
<?php
} else {
echo $primary_nav;
}
?>
<?php do_action( 'et_header_top' ); ?>
</div><!-- /#et-navigation -->
3. Conditionally replace the theme menu with UberMenu
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'primary-menu' ) ); ?>
<?php else: ?>
<!-- ET Navigation -->
<div id="et-navigation" class="<?php echo $et_navigation_classes; ?>">
<?php
$menu_class = 'nav';
if ( 'on' == et_get_option( 'extra_disable_toptier' ) ) {
$menu_class .= ' et_disable_top_tier';
}
$primary_nav = wp_nav_menu( array(
'theme_location' => 'primary-menu',
'container' => '',
'fallback_cb' => '',
'menu_class' => 'nav',
'menu_id' => 'et-menu',
'echo' => false,
'walker' => new Extra_Walker_Nav_Menu,
'header_search_field_alone' => $header_vars['header_search_field_alone'],
'header_cart_total_alone' => $header_vars['header_cart_total_alone'],
) );
if ( !$primary_nav ) {
?>
<ul id="et-menu" class="<?php echo esc_attr( $menu_class ); ?>">
<?php if ( 'on' == et_get_option( 'extra_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', 'extra' ); ?></a></li>
<?php }; ?>
<?php show_page_menu( $menu_class, false, false ); ?>
<?php show_categories_menu( $menu_class, false ); ?>
</ul>
<?php
} else {
echo $primary_nav;
}
?>
<?php do_action( 'et_header_top' ); ?>
</div><!-- /#et-navigation -->
<?php endif; ?>
Styling
1. Custom CSS
Flex Box
Extra uses the flex box model in its header, so add this CSS in your CSS Tweaks – Desktop to align UberMenu properly. You may need to adjust the order depending on where you want it to appear.
.ubermenu.ubermenu-main{
display:flex !important;
order:3;
}
Submenu items
The theme has further non-modular styles in the header.less that hides submenus with opacity:0
header.header li ul {
z-index: 1000;
position: absolute;
border-radius: 0 0 3px 3px;
box-sizing: border-box;
transition: 0.1s ease;
opacity: 0;
visibility: hidden;
}
To overcome this without completely rewriting the theme’s header, add this
.header .ubermenu .ubermenu-active .ubermenu-submenu.ubermenu-submenu-type-stack,
.header .ubermenu .ubermenu-active .ubermenu-submenu .ubermenu-tabs-group,
.header .ubermenu .ubermenu-active .ubermenu-submenu .ubermenu-tabs-group ul,
.header .ubermenu .ubermenu-active .ubermenu-submenu ul:not(.ubermenu-submenu){
opacity:1;
visibility:visible;
}
2. UberMenu Configuration Settings
Skin
The best choice for a theme like this is generally the Vanilla skin.
Menu Vertical Alignment
If you are using a right-aligned menu and you would like to align the menu to your logo, you can set the Menu Bar Margin Top setting (to push the menu down), and/or add top level vertical padding. For example, you might set the Menu Bar Margin Top setting to 33px.
Submenu Bounds
If you are using a right-aligned menu and you’d like the submenu to be wider than the menu bar, set the Bound Submenu To setting to “Unbounded”
3. Mobile Menu
First, we need to make the mobile toggle flex like the rest of the header by adding this in the Custom Tweaks – Mobile
.ubermenu-responsive-toggle-main{
display:flex;
order:3;
}
In the responsive settings, you will likely want to remove the Responsive Toggle Content setting value
Then set the Responsive Toggle colors and font size as desired in the Customizer. Or you may wish to use something like
.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main{
background:none;
border:none;
font-size:24px;
color:#222;
padding-top:40px;
}
Since the menu is now in flex mode, add this to make the mobile menu full width.
.ubermenu.ubermenu-main .ubermenu-nav{
width:100%;
}