Storefront (WooThemes)

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.

On this page