wp_nav_menu is called twice with the same theme_location parameter (UberMenu 3)

Background

UberMenu is applied to a particular wp_nav_menu call based on the theme_location parameter.

If you activate UberMenu on a specific theme location, UberMenu will replace all menus in the theme that use that theme location. So if there are two menus with the same theme location, you will end up with two UberMenus.

The Problem

Some themes call wp_nav_menu twice with the same theme_location parameter – sometimes to produce a responsive menu, sometimes to test for the menu’s existence.

All menus with an UberMenu-activated theme location will be replaced by UberMenu. 99% of the time, this is because the theme prints two menus – one for desktop and one for mobile, visually hiding one at a time with CSS depending on the screen width. When UberMenu replaces the mobile menu which is normally hidden by the theme’s CSS, the theme’s CSS no longer applies, and you see both menus.

Here’s a common theme menu pattern, where the theme might hide the mobile menu using some CSS like this:

@media screen and (min-width:960px){
  .main-menu-responsive{ display:none; } /* Hide mobile menu above 959px */
}
@media screen and (max-width:959px){
  .main-menu-desktop{ display:none; } /* Hide desktop menu below 960px */
}

And print two menus like this

<div id="nav">
    <?php 

    // this is the desktop menu
    wp_nav_menu( array(
        'theme_location' => 'main_menu',  
        'container_class' => 'main-menu-desktop' 
    ));
 
    // this is the mobile menu
    wp_nav_menu( array(
        'theme_location' => 'main_menu',  
        'container_class' => 'main-menu-responsive', 
        'walker' => 'responsive_walker' 
    )); 
    ?>
</div>

When UberMenu is activated on the main_menu theme location, it replaces both menus. Since the `main-menu-responsive` class won’t exist once UberMenu replaces the theme menu, there is no CSS to hide the menu, and both are displayed.

Identifying the issue

You’ll need to find the wp_nav_menu function call in your theme and check the parameters that are being passed to it. This function is generally called in the header.php under normal circumstances, but you may need to do a global search on your theme files to locate it. Look for the wp_nav_menu call being made twice with the same theme_location parameter.

The Solution

The theme needs two menus, but UberMenu only needs one to cover both desktop and mobile interfaces.

If you don’t have residual styling coming from the theme, the simplest solution is just to remove one of the theme’s wp_nav_menu() calls. Note that sometimes themes wrap this call in other functions, or the two calls might not be right next to one another in the code. This varies widely depending on the theme, but most of the time you will want to look in the header.php

The more robust solution (in the sense that if you disable UberMenu, you won’t need to edit any code to revert to the theme’s menu system), is to use Manual Integration to conditionally display UberMenu when present, and the theme’s menu system otherwise. In the example given above, that would look like this:

<?php if( function_exists( 'ubermenu' ): ?>
  <?php ubermenu( 'main' , array( 'theme_location' => 'main_menu' ) ); ?>
<?php else: ?>
  <div id="nav">
    <?php 

    // this is the desktop menu
    wp_nav_menu( array(
        'theme_location' => 'main_menu',  
        'container_class' => 'main-menu-desktop' 
    ));
 
    // this is the mobile menu
    wp_nav_menu( array(
        'theme_location' => 'main_menu',  
        'container_class' => 'main-menu-responsive', 
        'walker' => 'responsive_walker' 
    )); 
    ?>
  </div>
<?php endif; ?>

The exact ubermenu function call can be generated in your Control Panel.

Note that if you would like to apply UberMenu to only a single wp_nav_menu call, you can change the Theme Location Instance setting in the Control Panel. 0 means apply to all, 1 means apply to the first instance of a particular theme location, 2 means the second and so on.