Conflict with theme’s responsive menu

Many responsive themes use the “responsive select menu” paradigm to display their responsive menus. This means that the theme actually prints two menus, and uses CSS media queries to only display one at a time.

By calling wp_nav_menu twice with the same theme_location parameter, the theme produces two menus, only one of which will become an UberMenu. The second is now superfluous.

Here’s what the setup usually looks like:

<div id="nav">
    <?php 
    // this is the menu you'll see at widths greater than 960px
    wp_nav_menu( 'theme_location' => 'main_menu',  'container_class' => 'main-menu-standard' );
 
    // this is the menu that will be displayed on mobile devices
    wp_nav_menu( 'theme_location' => 'main_menu',  'container_class' => 'main-menu-responsive', 'walker' => 'responsive_walker' ); 
    ?>
</div>

Several situations may arise, depending on how the theme has setup its responsiveness:

1. Both menus may be displayed at small sizes
2. UberMenu may be hidden by the theme at small sizes
3. UberMenu may be hidden at full size

You have three options to resolve this:

1. Using only UberMenu

UberMenu is already responsive, and does not require an additional menu. If you wish to use UberMenu’s responsive capabilities, you’ll need to find the secondary (responsive) wp_nav_menu call (normally in your theme’s header.php), and remove it. Now you’ll have a single menu controlled entirely by UberMenu. Be sure to remove any residual styling (see also: residual styling troubleshooting guide) in the process.

2. Using UberMenu with the theme’s responsive menu

If you want to use UberMenu for wider screens and the theme’s responsive menu for mobile devices, you’ll need to do two things:

1. If your responsive menu is printed first, and you aren’t getting an UberMenu at all due to the wp_nav_menu function being called twice with the same theme_location parameter, replace the wide-screen wp_nav_menu call with UberMenu Easy Integration. This creates a separate theme_location (called “UberMenu”), which we will activate – and then deactivate the theme’s standard theme_location.
2. You’ll then (likely) need to apply CSS to hide UberMenu ( #megaMenu{ display: none; } or .main-menu-standard{ display: none; } ) for the appropriate size/media query. This will vary based on your theme, so it’s easiest to base it on the original menu’s media queries (switch off UberMenu and observe the breakpoints using Firebug or Chrome Developer Tools.

3. Use UberMenu + Responsive Select Menu

You can also use UberMenu with my (free) Responsive Select Menu plugin. Again, you’d remove the second wp_nav_menu call, then just follow the instructions to set up the Responsive Select Menu at the appropriate breakpoint (no coding required, you can do this in the Responsive Select Menu Control Panel). See a demo here