Changes I make in the Theme Editor aren’t being applied to the menu

Max Mega Menu regenerates the CSS associated with your menu each time you save a menu, save a theme, or click the ‘Clear CSS Cache’ button. The new CSS will then be saved in your wp-content/uploads folder.

There are a few things that can stop the new CSS from reaching your browser (making it appear as if changes to a menu theme are not being applied).

Basic Checks

1. Are you editing the correct menu theme? Make sure the theme you have been editing is the one that is applied to your menu. You can see which theme is applied to a menu under Appearance > Menus.

2. Is your browser cache clear? Press CTRL+F5 to force your browser to load a fresh, uncached copy of your site.

3. Are you editing the correct setting? There are many settings in the theme editor, split into different sections. If you are trying to change the display of a Mega Menu, make sure you are editing a Mega Menu setting, not a Flyout Menu setting.

Caching/Minification Plugins

Are you running a minification or caching plugin? (E.g. W3 Total Cache, Autoptimize, Better WordPress Minify etc)

If so you will need to clear the minification cache after making changes to a menu theme.

Content Delivery Networks

Are you using a CDN? (E.g. CloudFlare, Sucuri, Amazon CloudFront, MaxCDN)

CDNs on their own should not pose a problem with the Max Mega Menu CSS, with one important exception. You need to make sure the query strings on static resources have not been removed.

View the HTML source of your page and search for ‘megamenu-css’. You should see a line that looks something like this:

The important part of this line is “?ver=b66d2a“. The ver parameter should be present. The ver parameter will change every time the CSS is updated. This in turn lets your CDN know that the CSS on your server (the “master” copy) has been updated. Without the ver parameter the CDN will have no way of knowing the source CSS has been updated and will continue to deliver outdated (cached) versions of the CSS file.

In this situation there are 2 options:

  1. Manually clear the CDN cache (don’t expect the new CSS to be updated immediately, allow a few minutes for the changes to show up).
  2. Work out why the query strings have been removed from your static page assets and restore them.

Remove Query Strings From Static Resources

If you have an optimisation plugin where this is an option, you should leave it disabled. Query Strings are a good thing and do not slow down your site; Google PageSpeed does not recommend query strings to be removed.

Query Strings allow us to automatically tell browsers when when static assets have been updated, i.e. the menu CSS. Without query strings, you must manually clear your browser cache to see changes to static assets (but remember, your website visitors will not know to do this!).

Server Side Caching

Are you using Varnish or Nginx caching? Make sure each of those caches are purged to allow updates to come through to your browser.

Incompatible Themes

Some themes that bundle Max Mega Menu functionality override the menu styling. This ensures the theme styling is applied to the menu regardless of the settings inside the Theme Editor (but, in doing so, break the theme editor). Themes affected include:

  • Helping Hands
  • Uplift
  • Gazeta
  • Majesty
  • Interiart
  • Remould

If you are an author of one of these themes please consider bundling the menu styling as a Menu Theme rather than overriding the styling inside the theme’s style.css file. See the StoreFront Integration plugin for details on how to bundle a new menu theme with your theme (using this technique will allow your users to modify the styling of the menu using the theme editor).

If you are a user of one of these themes please contact your theme author for help with adjusting the menu styling.

Related Articles