Handling Responsive Theme Menus

Responsive theme menus have made menu integration more complicated. They can cause three main types of conflicts:

1. The theme may hide UberMenu at small sizes
2. The theme may hide UberMenu altogether
3. The theme may show both UberMenu AND theme menu (see If UberMenu replaces your responsive menu but not your main menu).

This is essentially a type of residual styling, and the same techniques are generally used to resolve the issue.

To use UberMenu with a theme that has an existing responsive menu, you need to choose whether you want to use UberMenu for your main menu only, or for your main and responsive menu.

Scenario A: Using UberMenu as your only menu (main and responsive)

In this case, your best option is to remove the entire theme menu system and replace it with UberMenu Direct.

For example, your theme likely does something like this

<div id="nav">
    <?php 
    //This order , theme_location, and classes may vary

    // this is the menu you'll see at widths greater than 960px
    wp_nav_menu( 'theme_location' => 'primary',  'container_class' => 'primary-menu' );

    // this is the menu that will be displayed on mobile devices
    wp_nav_menu( 'theme_location' => 'primary',  'container_class' => 'primary-menu-responsive', 'walker' => 'responsive_walker' ); 
    ?>
</div>

The whole thing would be replaced with

<?php
if( function_exists( 'uberMenu_direct' ) ){
  uberMenu_direct( 'primary' );
}
?>

(make sure your theme-defined theme_location, in this case `primary`, is passed to UberMenu Direct).

Scenario B: Using UberMenu as your main menu and your theme’s responsive menu

In this case, you’ll need to adjust the theme CSS to show UberMenu and its own responsive menu at the right times. This will vary from theme to theme, but will involve hiding and showing the #megaMenu div via media queries, for example:

@media only screen and (max-width: 960px){
   #megaMenu{ display: none; }
}

If necessary, the code for the theme’s menu will be specific to the theme.

In some cases, you may just need to adjust the Theme Location Instance – see If UberMenu replaces your responsive menu but not your main menu

Scenario C: Using UberMenu and Responsive Select Menu

In this case, replace the entire theme menu system as in Scenario A, then install the Responsive Select Menu plugin.