Residual Styling Detection / Manual Integration Tool

Since v3.2.3

This tool helps you find the proper code in your theme to replace with UberMenu to avoid residual styling interference from your theme.

Jump to video tutorials

Important Notes

This is a tool, it does not have the intelligence of a human; you still need to apply consideration when using this tool.
This tool is for a specific type of interference, residual styling, that occurs in the most common way – via CSS applied through a wrapper. If the theme interference is not due to residual styling, or if the residual styling can’t be eliminated by removing a wrapper, this tool won’t help
Always make a backup of your site before making any changes, so that you can revert easily if you create an error.

Overview

Residual styling (click that link for more details) is often caused by this scenario – a theme codes its menu like this:

<nav class="primary-nav">
  <?php wp_nav_menu( array(
    'container' => false,
    'theme_location' => 'primary'
  ) ); ?>
</nav>

And adds styles like this

.primary-nav ul li a{
  color:red;
}

When UberMenu replaces the menu via automatic integration, you end up with this structure:

<nav class="primary-nav">
  <nav class="ubermenu">
    <ul>
      <li><a href="">Menu Item</a></li>
    </ul>
  </nav>
</nav>

And the theme styles still apply, whereas if the theme used wp_nav_menu()’s container arguments appropriately, the styles would no longer apply and would not interfere with UberMenu.

The cleanest way to avoid these styles from the theme and not create a maintenance nightmare is to remove the container wrapper UberMenu that is the source of the styles. To do this robustly so that disabling UberMenu doesn’t break the site, we conditionally replace the menu with the Manual Integration code like this:

<?php if( function_exists( 'ubermenu' ) ): ?>
  <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
  <nav class="primary-nav">
    <?php wp_nav_menu( array(
      'container' => false,
      'theme_location' => 'primary'
    ) ); ?>
  </nav>
<?php endif; ?>

This tool assists you with:

1. Identifying the source of the residual styling (the container)

The tool allows you to remove containers wrapping the menu sequentially. By visually checking the menu and noting when the residual styles have been eliminated, the tool will identify the container at the source of the styling issue.

2. Locating the code within the theme template files

After determining the container, the tool will attempt to locate the lines in your theme files by searching the PHP files for the container ID (if available), class (if available), and the wp_nav_menu() function. It provides you with search results so you know where to look in the theme to find that code.

3. Suggests skeleton code to replace the menu code with

The tool then provides you with this skeleton code for the conditional replacement:

<?php if( function_exists( 'ubermenu' ) ): ?>
	//UBERMENU MANUAL INTEGRATION CODE GOES HERE - ubermenu()
<?php else: ?>
	//THEME MENU CODE, AS IS, GOES HERE
<?php endif; ?>

so that you can just replace the if statement with the ubermenu() manual integration code generated in the Control Panel, and the else statement with the theme menu code found in the theme files in step 2.

The following videos walk you through the process step by step.

Don’t forget! You should always make your edits in a child theme. The edits in these videos are made in parent themes to save time, but you will want to move your changes into a child theme so that you don’t lose them when you update

Video Tutorials

Quick Runthrough Version

This first video is faster paced for people who want a quick runthrough of the tool functionality and already have a good understanding of web development.

Residual Styling Detection Tool Walkthrough (Part 1)

In part 1 of the walkthrough, we explain what residual styling is with an example, introduce the tool, and show how to use it to identify, locate, and replace the theme’s menu.

Residual Styling Detection Tool Walkthrough (Part 2)

In part 2 of the walkthrough, we use the tool to identify, locate, and replace the theme’s menu in a more complex theme menu which has two containers two remove and includes the menu via a hook system.

UberMenu 3