Login

Styles don't look like the demo

TroubleShooter
Symptom

Because we’re injecting a chunk of HTML into a theme’s markup and replacing an existing menu, the theme (or other plugins) CSS styles, javascript, or PHP functions can affect how the menu displays. Generally, themes that are written with modularity in mind don’t have this issue.

Symptoms

  • Menu items completely unstyled
    The menu items are present, but they are not styled at all like a menu - they just display as an unordered list.
  • No animations
    The submenu opens when hovering over a top level menu item, but the animations do not occur.
  • Styles present but not like demo
    It is clear that the UberMenu styles are being applied, but they don't look like the demo - this indicates that other styles (from the theme or another plugin) are also affecting the look of the menu.

Potential Diagnosis

  • jQuery version incorrect

    UberMenu 3.0 requires jQuery 1.11.1 or higher (but less than jQuery v2), which should automatically be included with WordPress 3.9 or higher. If your theme or another plugin has changed the jQuery version, that can cause javascript errors that can break the menu as well as other javascript component on…

  • UberMenu javascript is not loaded

    If a WordPress theme does not include the required hooks (wp_footer), UberMenu can’t load its javascript, so javascript functionality like animations, triggers, and maps will be lost.

  • UberMenu stylesheets not loaded

    If a WordPress theme does not include the required hooks (wp_head), UberMenu can’t load its stylesheets, so the menu won’t be styled.

  • Internet Explorer stylesheet limit reached

    Internet Explorer can only load 31 stylesheets per page. If your theme or another plugin is loading a large number of stylesheets, and the limit is reached before UberMenu’s stylesheets are loaded, UberMenu’s styles will not appear at all in Internet Explorer, because IE has ignored those stylesheets entirely.

  • Residual styling from the theme is affecting the menu display

    If your theme’s menu styles are based on a hard-coded element wrapping the menu, those styles will still apply after replacing the menu markup, and will conflict and negatively impact the style and functionality of the menu.

  • jQuery Enhancements disabled (UberMenu 2 only)

    If you disable jQuery Enhancements, you will lose all javascript functionality in the menu, including animations, maps, non-hover triggers, and the responsive menu toggle expansion.

  • UberMenu stylesheets disabled

    If the basic.css file has been disabled in the Control Panel, the menu will not function properly if the styles have not been included elsewhere.

  • Unrelated javascript error

    If another plugin or your theme throws a javascript error before UberMenu’s javascript has been executed, it will prevent UberMenu from functioning properly, including submenu positioning, click events, responsive menu toggling, and more.

  • wp_nav_menu output is filtered or manipulated by theme

    Some themes will manipulate the UberMenu output in a non-standard way, resulting in breaking the menu style, layout, and functionality, as the markup is not as expected.

  • Residual scripting from the theme

    Some themes’ menu javascript will still affect the menu even after UberMenu has replaced the default menu. As a result, UberMenu can appear distorted, the styles can be incorrect, extra markup may be added, and the functionality may break.