Background
Most themes have some javascript that is applied to the default menu. There is no way for UberMenu to automatically remove this when it is activated.
The Problem
Most of the time, when UberMenu replaces a theme menu, the theme menu javascript is neutralized (it no longer applies because the root identifier element no longer exists).
However, some themes’ menu javascript will still be in effect even after UberMenu has replaced the default menu. As a result, the menu can appear distorted, the styles can be incorrect, extra markup may be added, and the functionality may break.
One common symptom of residual scripting is that the third level menu items in a mega menu are only displayed when hovering over the second level menu items.
Identifying the issue
The most common symptoms that indicate residual scripting are:
- Submenu columns items not appearing until the second level is hovered, or disappear after hovering out
- Submenus can be opened once, but then do not open again
- Responsive toggle not working
- The class “superfish” appearing in the UberMenu markup
In general, an extra class or inline CSS tends to be added to the menu.
Comparing the markup either from the inspector to the plain source, between inspectors while javascript is disabled, can help to determine if external javascript is acting on the menu.
The Solution
In the vast majority of cases, residual scripting goes hand in hand with residual styling, and is resolved the same way ( Manual Integration for UberMenu 3, or changing the ID or class of the root element in UberMenu 2).
In some cases, the script targets the menu too generically (for example, something like $( ‘#header ul’ ) instead of $( ‘#navigation ul.menu’ ) ). In this case, the offending javascript will have to be tracked down and removed manually. The easiest way to locate it is to use the Chrome Dev Tools and search all assets for menu-related strings like “sub-menu” or “ul li”