Oxygen will create residual styling as well as residual scripting (submenu items will be hidden on hover out) and interfere with mobile menu functionality. So we’ll replace the theme’s menu system using Manual Integration to prevent the theme from interfering.
Manual Integration
1. Create and activate a child theme
We’ll make all edits in a child theme to preserve them in case you update the theme in the future.
2. Copy sidebar-menu-top.php to the child theme
The theme’s menu system is located in this file, so we’ll be editing it to conditionally replace it with UberMenu. (If you’re using header type 1, it’s actually located in sidebar-menu.php instead).
3. Find the appropriate menu code
The sidebar-menu-top.php template has multiple locations where the menu can be printed, depending on the header type you’ve chosen. You’ll need to locate the appropriate code for your header type.
Here are the Oxygen header types with their IDs labeled so you can locate them in the template (note that Header Type 1 is in a different sidebar template)
4. Replace the theme menu code with UberMenu
Let’s take the example of Header Type 2. So we’ll find the section for that header type
<?php if(HEADER_TYPE == 2): ?>
Within that section, we’ll find the main menu section (we’re leaving the top menu intact in this example)
<div class="main-menu-top<?php echo HAS_SLIDER ? ' has-slider' : ''; echo ! defined("GRAY_MENU") ? ' white-menu' : ''; ?>">
<div class="main">
<div class="row">
<div class="col-md-12">
<nav class="main-menu-env top-menu-type-2">
<?php if(get_data('header_sticky_menu')): ?>
<a href="<?php echo home_url(); ?>" class="logo-sticky<?php echo $use_uploaded_logo ? ' image-logo' : ''; ?>">
<span>
<?php if($use_uploaded_logo && $has_responsive_image): ?>
<img class="hidden-sm hidden-xs" src="<?php echo $custom_logo_image; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" />
<img class="visible-sm visible-xs" src="<?php echo $custom_logo_image_responsive; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>"<?php if(isset($custom_logo_image_responsive_size)): ?> width="<?php echo absint($custom_logo_image_responsive_size[0]/2); ?>"<?php endif; ?> />
<?php elseif($use_uploaded_logo): ?>
<img src="<?php echo $custom_logo_image; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" />
<?php else: ?>
<?php echo get_data('logo_text'); ?>
<?php endif; ?>
</span>
</a>
<?php endif; ?>
<?php echo $main_menu; ?>
<?php if($has_megamenu == false && get_data('header_menu_search')): ?>
<form action="<?php echo home_url(); ?>" method="get" class="search-form" enctype="application/x-www-form-urlencoded">
<a href="#">
<span class="glyphicon glyphicon-search"></span>
</a>
<div class="search-input-env<?php echo trim(get('s')) ? ' visible' : ''; ?>">
<input type="text" class="search-input" name="s" placeholder="<?php _e('Search...', 'oxygen'); ?>" value="<?php echo esc_attr(get('s')); ?>">
<input type="hidden" name="post_type" value="product" />
</div>
</form>
<?php endif; ?>
</nav>
</div>
</div>
</div>
</div>
Then we’ll conditionally replace this with UberMenu:
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'main-menu' ) ); ?>
<?php else: ?>
<div class="main-menu-top<?php echo HAS_SLIDER ? ' has-slider' : ''; echo ! defined("GRAY_MENU") ? ' white-menu' : ''; ?>">
<div class="main">
<div class="row">
<div class="col-md-12">
<nav class="main-menu-env top-menu-type-2">
<?php if(get_data('header_sticky_menu')): ?>
<a href="<?php echo home_url(); ?>" class="logo-sticky<?php echo $use_uploaded_logo ? ' image-logo' : ''; ?>">
<span>
<?php if($use_uploaded_logo && $has_responsive_image): ?>
<img class="hidden-sm hidden-xs" src="<?php echo $custom_logo_image; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" />
<img class="visible-sm visible-xs" src="<?php echo $custom_logo_image_responsive; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>"<?php if(isset($custom_logo_image_responsive_size)): ?> width="<?php echo absint($custom_logo_image_responsive_size[0]/2); ?>"<?php endif; ?> />
<?php elseif($use_uploaded_logo): ?>
<img src="<?php echo $custom_logo_image; ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" />
<?php else: ?>
<?php echo get_data('logo_text'); ?>
<?php endif; ?>
</span>
</a>
<?php endif; ?>
<?php echo $main_menu; ?>
<?php if($has_megamenu == false && get_data('header_menu_search')): ?>
<form action="<?php echo home_url(); ?>" method="get" class="search-form" enctype="application/x-www-form-urlencoded">
<a href="#">
<span class="glyphicon glyphicon-search"></span>
</a>
<div class="search-input-env<?php echo trim(get('s')) ? ' visible' : ''; ?>">
<input type="text" class="search-input" name="s" placeholder="<?php _e('Search...', 'oxygen'); ?>" value="<?php echo esc_attr(get('s')); ?>">
<input type="hidden" name="post_type" value="product" />
</div>
</form>
<?php endif; ?>
</nav>
</div>
</div>
</div>
</div>
<?php endif; ?>
As a second example, if you were replacing the third header type, it’d look like this:
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'main-menu' ) ); ?>
<?php else: ?>
<nav class="main-menu-env">
<?php echo $main_menu; ?>
<?php if(get_data('header_menu_search')): ?>
<form action="<?php echo home_url(); ?>" method="get" class="search-form" enctype="application/x-www-form-urlencoded">
<a href="#">
<span class="glyphicon glyphicon-search"></span>
</a>
<div class="search-input-env<?php echo trim(get('s')) && HEADER_TYPE == 2 ? ' visible' : ''; ?>">
<input type="text" class="search-input" name="s" alt="" placeholder="<?php _e('Search...', 'oxygen'); ?>" value="<?php echo esc_attr(get('s')); ?>" />
<input type="hidden" name="post_type" value="product" />
</div>
</form>
<?php endif; ?>
</nav>
<?php endif; ?>
Note: if your mobile menu is hidden after this process, you may need to add this CSS:
.navs{
display:block !important;
}
5. Remove the theme toggle
The theme’s mobile menu toggle is easiest to remove by just hiding it with CSS:
.mobile-menu-link{
display:none !important;
}
Settings Configuration
Depending on which header type you are using, you will now want to configure various menu settings.
In the first example above (header type 2), we’ll enable “Center Inner Menu Bar” and set the “Inner Menu Bar Width” to 1140px, then set “Bound Submenu To” to “Inner menu bar width”. We can also set the menu bar background to white if we’d like. Vanilla is a good skin to use.
For other header types, you may want to switch the menu bar position to something other than full width, and adjust the submenu bounds to Unbounded instead.
CSS Tweaks
z-index
If your submenu ends up falling behind the other content on the page, you can add this CSS in the CSS Tweaks to resolve it (this will likely happen with header type 2 and inner-bound submenus)
.ubermenu{
position:relative;
z-index:100;
}