Residual Styling Detection / Manual Integration Tool

Overview

Residual styling is when CSS styles from your theme interfere with UberMenu's styles. This is most commonly caused by CSS applied based on an element wrapping UberMenu.

This tool allows you to determine the source element of your residual styling, by removing containers surrounding the menu until the residual styling has disappeared from the menu. The tool will then tell you where to look in your theme files to find the code that needs to be replaced to eliminate the residual styling permanently.

Please visit this Knowledgebase article for a Walkthrough of the Residual Styling Detection / Manual Integration Tool

Before beginning, check if there is an Integration Guide specifically for your theme, to save you some time

Next

Step 1: Activate Direct Injection

Enable the Direct Injection setting in the UberMenu Control Panel and assign your menu to it.

This will add an extra menu at the top of your site (you will disable it at the end of this process). If the source of the residual styling is from a container/wrapper on the menu, this menu will not be affected, so it will serve as a "control" (if this menu is also broken, it means the theme or another plugin may be interfering in a different way. Please see Theme Interference for more information). By comparing the styles of this menu to your main menu, you can tell when the source of the issue has been removed.

Next Back

Step 2: Unwrap the menu

Click the "Remove Container" button to remove the menu's parent wrapper. If there is still residual styling from the theme, continue to click "Remove Container" until it is removed. After each click, check the menu to see if the issue has been resolved. Once the styles look correct, click the "Residual Styling is Removed" button.

Multiple menus detected. Please click on the green border surrounding the menu you wish to work with.

Removed Containers:

Remove Container Click once Residual Styling is Removed Back

If your styles never end up looking correct, the source of the residual styling my be overly generic and not be able to be eliminated by removing a container (try using Chrome Developer Tools to source the issue instead), or the interference may not be from CSS - please see Theme Interference for more information.

Step 3: Find the code to replace in your theme

The containers surrounding your menu look something like this:

So your conditional replacement will look something like this:

(Do not copy and paste this code, it is just an approximation based on the front end markup, while you will be replacing back end PHP)

Click below to search for the theme's menu code within your theme files