Handling Responsive Theme Menus

This is the most common reason why “the mobile / responsive menu isn’t working” – you’re not actually seeing UberMenu, you’re seeing the theme’s menu, or the theme’s menu is interfering

Responsive theme menus have made menu integration more complicated. Some themes use multiple menu instances (one for desktop and one for mobile, alternatively hidden with CSS to display one at a time). They can cause five 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
4. The theme may show UberMenu twice
5. The theme may hide UberMenu, and show both it and its responsive toggle when the menu’s toggle is clicked

Usually the best solution is to replace the theme’s menu system with the UberMenu Manual Integration code.

A good way of doing this is to leave your theme’s code intact, but conditionally display UberMenu instead when the UberMenu plugin is active.

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>

You can modify your theme header template like this (make sure to do this in a child theme to preserve your changes):

<?php
if( function_exists( 'ubermenu' ) ){
  ubermenu( 'main' , 'primary' );
}
else{ ?>
  <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>
  <?php
}
?>

Generally you would want to place the UberMenu code inside any positional elements (like a grid column), but outside any theme nav elements (which form the root of the navigation tree). This strategy allows you to maintain the position of the menu within the theme, but prevent any theme styling from affecting the menu.