Sometimes, even after activating UberMenu, some of the theme’s default menu styles will still affect the menu – often negatively. These styles conflict with the UberMenu styles, and are known as “residual styling”. To make UberMenu function like the demo, we need to neutralize this effect. If you experience this issue with your theme, this section will help you resolve the issue. Otherwise, you can skip to the next section.
Understanding the Issue
The reason this is an issue is that UberMenu can only control the output of the wp_nav_menu function – a core WordPress function. It cannot control what the theme does outside of this function.
Most menus use this basic structure:
<nav id="navigation">
<ul class="menu">
<li class="menu-item"><a href="/">Home</a></li>
</ul>
</nav>
The theme then writes the styles and functionality for this menu based on the menu root element, #navigation
/* Sample theme menu styles */
#navigation{
}
#navigation ul.menu{
}
#navigation ul.menu li.menu-item{
}
/* Sample theme menu javascript */
$( '#navigation li.menu-item' ).hover( function(){
//do stuff
});
The goal is that the #navigation ID should be removed when UberMenu is installed, thereby neutralizing theme CSS styles and javascript. The issue comes into play as to how that wrapper is created. The wp_nav_menu function provides the ability to set an ID and class for the menu wrapper, and themes should take advantage of this. That means that this single line of code in the theme template:
<?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container_id' => 'navigation' , 'menu_class' => 'menu' ) ); ?>
will desired the above HTML output. The problem occurs when themes choose to hard code the #navigation wrapper:
<nav id="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?> </nav>
The difference is that in the first example, UberMenu can replace the #navigation ID from the HTML output altogether, neutralizing the #navigation-based CSS styles, meaning there are no style conflicts. The result:
<!-- UberMenu's influence starts here -->
<nav id="megaMenu">
<ul class="megaMenu">
<li class="menu-item"><a href="/">Home</a></li>
</ul>
</nav>
<!-- UberMenu's influence ends here -->
In the second example, UberMenu has no control over the hard-coded #navigation element, so all of the CSS styles from the theme will still apply, and will conflict with UberMenu styles.
<nav id="navigation">
<!-- UberMenu's influence starts here -->
<nav id="megaMenu">
<ul class="megaMenu">
<li class="menu-item"><a href="/">Home</a></li>
</ul>
</nav>
<!-- UberMenu's influence ends here -->
</nav>
The Solution
We need to stop the theme’s menu CSS styles from affecting UberMenu. That means we can either adjust the identifiers (IDs and Classes) in the template, or remove the styles from the theme stylesheets. Since you generally don’t want to edit theme stylesheets, the former is often the preferred solution. That means we just change
<nav id="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?> </nav>
to
<nav id="navigation-uber"> <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?> </nav> <!-- OR --> <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?>
In the majority of cases, this code can be located in the theme’s header.php file. If not, you’ll need to search your theme for the wp_nav_menu function (with the appropriate theme_location).
For optimal forward-compatibility with your theme, it is always recommended to make theme customizations in a Child Theme. Generally this is as simple as copying your header.php to your child theme’s directory and making your edits there. Your theme provider should be able to advise you on best practices if necessary
For a more in-depth explanation and suggestions on how to resolve residual styling, please see Residual styling from the theme is affecting the menu display.