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.