Login

UberMenu 3

Support CenterSubmit a Ticket

Automatic Integration Requirements

Automatic Integration is a feature that allows you to replace a specific menu on your site with UberMenu, provided the theme has been appropriately coded.

Requirements for replacement

1. Registered theme location

The theme must have properly registered a theme location. This will show up when you go to Appearance > Menus > Manage Locations.

If you do not have any theme locations, the Manage Locations tab will not appear, but you will see this message in Appearance > Menus:

In that case, you will need to use Manual Integration

2. The theme must use the registered theme location properly when calling wp_nav_menu

99% of themes do this right, but once in a while a theme just won’t be coded properly. When the theme calls wp_nav_menu, it needs to do two things:

1. Use the theme_location argument

If the theme isn’t using the ‘theme_location’ argument in its wp_nav_menu call, then the registered theme location isn’t actually being used at all, so it is irrelevant.

2. Do NOT use the menu argument

The ‘menu’ argument defines a specific menu to display, rather than a theme location. If the menu argument is present, it will override the ‘theme_location’ parameter, making the Theme Location irrelevant. A theme should pretty much never use the menu parameter, because it is based on the user’s name for their menu, which could be anything.

Good:

wp_nav_menu( array( 
  'theme_location' => 'primary',
  'container_class' => 'nav-menu'
) );

Bad – missing theme_location:

wp_nav_menu( array( 
  'container_class' => 'nav-menu'
) );

Bad – using ‘menu’ argument:

wp_nav_menu( array( 
  'theme_location' => 'primary',
  'container_class' => 'nav-menu'
  'menu' => 'my-menu'
) );

Requirements for proper functionality

In order for UberMenu to replace your menu and function properly, the theme needs to be coded modularly (most themes are).

If the theme is not coded modularly, it may result in the CSS or javascript from the theme still affecting the menu, which can break the UberMenu layout. This is known as Residual Styling and Residual Scripting.

Each menu has a root element, and a well-coded theme will be styled based on that root element. For example:

<nav class="primary-nav">
  <ul class="menu">
    <li class="menu-item"><a href="#"></a></li>
  </ul>
</nav>

Then the style to make the menu item link red would look like this:

.primary-nav .menu-item > a{
  color:red;
}

The HTML above can be generated entirely by the wp_nav_menu function. If the root element class/ID is provided in the wp_nav_menu function, UberMenu can override this. Both examples below generate identical output HTML (as shown above).

Example 1: Good
wp_nav_menu( array(
  'container_class' => 'primary-nav',
  'menu_class' => 'menu',
  'theme_location' => 'primary'
) );

The wp_nav_menu function call above creates the entire HTML output, including the

On this page