Due to residual styling, Storefront breaks UberMenu when installed. To prevent the theme from interfering, we can use Manual Integration.
Need a Storefront child theme? You can download the official starter version here: Storefront child theme documentation
Recommended Solution: Pluggable Function
Since Storefront’s menu function is pluggable, the simplest way to do this is to just paste this PHP in your child theme’s functions.php
function storefront_primary_navigation() {
?>
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php apply_filters( 'storefront_menu_toggle_text', $content = _e( 'Primary Menu', 'storefront' ) ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
<?php endif; ?>
<?php
}
Alternative Solution: Hook system
An alternative solution is to use the Storefront Hook System to unhook the theme menu and add in UberMenu instead. This solution is necessary if there is already a plugged version of the storefront_primary_navigation() function registered on your site (such as if you are using Storefront Pro).
Here’s the code you’d add in the child theme in that case:
add_action( 'storefront_header' , 'remove_storefront_primary_navigation' , 1 , 0 );
function remove_storefront_primary_navigation(){
if( function_exists( 'ubermenu' ) ){
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
}
}
add_action( 'storefront_header', 'storefront_primary_navigation_ubermenu', 50 );
function storefront_primary_navigation_ubermenu() {
?>
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php apply_filters( 'storefront_menu_toggle_text', $content = _e( 'Primary Menu', 'storefront' ) ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
<?php endif; ?>
<?php
}
One possible downside is that if your storefront_header hook priorities have been changed, you’ll need to adapt the code above to those new hook priority values.