Menu flashes unstyled list before styles load

If your menu briefly appears as a list before the actual menu styles load, this means that your stylesheets are loading after your menu’s HTML markup.

The layout of a website works like this:

<html>

   <head>

      /* Stylesheets go here */

   </head>

   <body>

      /* Page elements go here */

   </body>
</html>

By loading the stylesheets before the elements that they style, you ensure that the elements are immediately styled as intended.

If you load the stylesheets AFTER the markup for the elements that they style, the elements are rendered with their default layouts until the CSS loads.

With UberMenu, you need to make sure that the ubermenu.css (UberMenu 3) or basic.css (UberMenu 2) as well as the skin you are using load in the head of your site.

If you view your site’s source and then search for UberMenu’s ubermenu.css, if it isn’t inside the head tags then it is in the wrong place.

Why would the stylesheets load after the menu?

Where your stylesheets are printed depends on your theme and can depend on other plugins. UberMenu registers the stylesheets, and your theme prints them by calling wp_head(), which should always be located in your site’s head.

The most likely scenario that results in your stylesheets ending up in your footer is that you have a caching or minifaction plugin running which moves your assets to the footer. In this case, you need to configure your caching plugin properly so that your stylesheets load in the header where they should be. The configuration settings will be specific to that plugin/theme, and you should consult the documentation of those products for how to properly configure them.

As a sidenote, it’s okay to load your javascript in the footer, and UberMenu’s scripts will load in the footer by default. Again, this can be changed by the theme or other plugins.