For UberMenu 3, please refer to the Knowledgebase: Residual Styling
Residual styling is the most common of several ways in which themes can interfere with the menu
Background
Every theme includes its own menu. UberMenu works by replacing the theme’s HTML markup with UberMenu’s custom menu markup, via WordPress’s wp_nav_menu() hooks.
The theme will provide its own menu styles (CSS), and while UberMenu can replace the theme menu markup, it can’t remove the styles.
When a theme’s menu has been written with modularity in mind, replacing the menu markup will neutralize the theme menu’s CSS styles. This is because the “root” identifier (ID or class) for the menu styles will be removed from the markup, as it is set via the wp_nav_menu function, which UberMenu can override.
The Problem
The problem occurs when a theme’s menu is not written modularly, meaning that its markup is not built entirely by the wp_nav_menu function, and the CSS styles from the theme still apply to the menu after UberMenu has been inserted.
The wp_nav_menu function (the core WordPress function for printing WordPress 3 menus) provides container and container_id parameters, which can be used to set the wrapper element for the menu.
GOOD: Modularly coded themes (most of them)
Most themes make use of the container parameters, and call the function like this:
wp_nav_menu( 'container' => 'div', 'container_id' => 'navigation', ... );
which results in this structure
<div id="navigation">
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item Title</a></li>
...
</ul>
</div>
The CSS is written like this:
#navigation ul{
/* Styles for menu bar */
}
#navigation ul li{
/* Styles for top level items */
}
#navigation ul li a{
/* Styles for top level links */
}
#navigation ul li ul li{
/* Styles for sub menu items */
}
Every style is prefixed with the #navigation ID. This allows UberMenu to override the container ID (because it is set in wp_nav_menu), replace the menu markup entirely, and thereby neutralize the styles, resulting in this markup when UberMenu is activated:
<div id="megaMenu">
<ul class="megaMenu">
<li class="menu-item"><a href="#">Menu Item Title</a></li>
...
</ul>
</div>
The theme styles no longer apply because the #navigation div no longer exists.
Problematic: non-modularly coded themes
However, some themes don’t make use of the container parameter, and instead call the wp_nav_menu function like this:
<div id="navigation">
<?php
wp_nav_menu(
'container' => false,
...
);
?>
</div>
In this case, the resulting markup once UberMenu is activated is:
<div id="navigation">
<div id="megaMenu">
<ul class="megaMenu">
<li class="menu-item"><a href="#">Menu Item Title</a></li>
...
</ul>
</div>
</div>
because the #navigation div is hard-coded instead of using the wp_nav_menu function. As a result, The CSS styles from the theme based on the #navigation ID prefix will still be applied to UberMenu, and will negatively affect the styles.
The extent of this effect can vary greatly; in some cases, it is only slightly noticeable, or may affect a few colors. In other cases, the residual styling can impact the entire layout and functionality of the menu.
The Solution
Unfortunately, there is no way for UberMenu to remove these hardcoded elements automatically (UberMenu can’t control anything not produced by the wp_nav_menu() function), so it needs to be removed manually.
Generally the easiest solution is to simply remove the root identifier (the prefix for all menu styles) and remove it from the HTML markup. The styles will no longer apply because the element no longer exists.
Note that this is not necessarily optimal – leaving the CSS intact is a waste of resources, loading unnecessary styles on each page. You are welcome to remove these, however, it almost always means editing your core theme files, so most customers don’t consider this to be worth the effort (the styles will reappear next time you upgrade your theme).
Finding the appropriate identifier
First, you’ll need to find the appropriate ID or class which is responsible for all menu styles. Most commonly it is the ID (less frequently the class) of the element wrapping the #megaMenu element. The easiest way to identify it is to open the menu up in the web inspector and edit the markup by removing IDs/classes until the residual styling is removed. Take note of which ID/class resolved the issue.
Generally the ID/class is fairly obvious, and can be confirmed by the styles in the stylesheet for the menu – with a well-coded theme, they will all be prefixed with a common identifier, often #navigation, #menu, #nav, .menu-wrapper, etc.
Locating the menu code
With a standard-coded theme, the menu code will usually appear in the header.php template. In this case, you’ll find the wp_nav_menu function there, and the elements that need to be targeted are surrounding the wp_nav_menu call.
Some themes have their own library functions that call wp_nav_menu in another file, so the function won’t appear in header.php. In that case, the easiest way to find the code is to do a global search for “wp_nav_menu” within your theme files.
Editing the code & dealing with upgrades
Now that you’ve found the relevant code, it’s tempting to simply remove the ID/class from the markup and be on your way. However, keep in mind that if you upgrade your theme in the future, this ID/class will return, and you’ll have to delete it again.
Instead, it’s a good idea to use a child theme, copy the header.php into that theme, and make your edits there instead.
Some themes will even include the menu via a hook, which will allow you to remove the default theme menu and replace it with UberMenu via your functions.php file (see an example with Genesis).
Sloppy coding
Some themes even code their menus far too generally – for example, their menu styles may be based on the #header element, an element whose effects are not limited to the menu itself. In this case, we can’t just change the ID, as it will likely have repercussions on other parts of the site – the code is not specific enough to the menu. Instead, we’ll need to actually remove the CSS itself from the stylesheets. This means tracking it down in the theme and commenting it out or deleting it.