Skip to Main Content

Elementor Nav Menu Broken: 6 Ways To Identify & Troubleshoot

Here are the 5 ways to troubleshoot and Fix the Nav Menu bug in Elementor pro

Picture credit to Reed

In this tutorial, I will show you 6 ways to identify & troubleshoot why is the Elementor Nav menu broken. 

This is one of the most common questions asked in Elementor’s Forum (only accessible with the Way Back Machine link) and this post is also the top results in Google Search.

Query related to navigation menu bug in Elementor Pro is featured top 1st in Google Search Results

Troubleshooting Elementor Nav Menu: Uncovering 6 Key Issues

  1. Combining & Minifying stylesheets and JavaScripts.
  2. Elementor Beta or Developer Edition plugin
  3. Elementor Features / Experiments
  4. Set the CSS Print Method to an external file
  5. Forgot or misses to Regenerate CSS and Data
  6. Caching.

Combining & Minifying Stylesheets and JavaScripts:

Plugins support both functionalities-

Many caching & Optimization solutions offer these functionalities and if you enable the features turn it off or exclude the scripts or stylesheets that cause the problems-

  1. WP Rocket: WP Rocket offers minification and Combining JS & CSS files but they also have the option not to combine it if your site uses HTTP/2 protocol. (see the red rectangle border for reference)If you have any issues, you can also refer to WP Rocket’s Doc on how to Exclude External JavaScript from Combining.
    File Optimization in WP Rocket settings
  2. Swift Performance: By default, Swift Performance will merge/combine scripts into a single file which sometimes can cause problems.If you have any issues, you can refer to Swift Performance’s documentation on how to exclude scripts from merging/ combining.
    Swift Performance Lite - Scripts Optimization
  3. SG Optimizer (Site Ground Optimizer): SiteGround Optimizers offers a combined JS feature that allows you to combine JS into a single file.
    SG Optimizer - Frontend Optimization - Scripts
  4. Autoptimize does offer Aggregate JS files to combine JS but you don’t have to enable it if your site uses HTTP/2 protocol.
    Just click the “Do not aggregate but defer?” to minify and optimize your JS and add defer attributes to all the JS so it doesn’t cause rendered-blocking.

    Click the Do not aggregate but to defer the script

Here are the do and don’t of combining stylesheets and JavaScripts-

Do:

  1. If your site uses HTTP/2 protocol, there is no point in combing JavaScripts (JS) and Stylesheets (CSS) into a single file to reduce HTTP requests.
  2. This old technique is used to improve site performance because HTTP/1.1 doesn’t support multiplexing which means it can’t handle multiple requests at once whereas HTTP/2 can.

Don’ts:

  1. If your site is still using the HTTP/1.1 protocol better change the hosting provider or choose CDN that supports HTTP/2 protocol because you’re missing lots of features.

How to check if the site uses the HTTP/2 protocol?

KeyCDN HTTP/2 is one of the most common testing tools.

My Site supports HTTP/2 protocol which improve site performance and give better experience to the users

Your Browser Dev tools: You can open dev tools by right-clicking on any page to inspect elements to open the Developer (Dev) tools.

Inspect elements > Network panel > reload the page

Chrome Developer tools - Network Panel where Protocol panel is disabled

If you’re not seeing the “Protocol” when you open the dev tools, it means it is hidden by default. To enable it you need to right-click the header of the network panel log and select protocol.

Dev tools - Network Panel Protocol is enabled

When you select the Protocol, you will see whether your site uses HTTP 1/1 or HTTP 2, or HTTP3 protocol. I am using Cloudflare CDN and the CDN already supports HTTP 3 protocol.

Dev tools shows my site is using HTTP3 protocol

– Solution

  1. Choose better-hosting providers ( Runcloud + Digital Ocean Droplets (Referal link) and combined with CDNs that support HTTP/2 by default like Cloudflare
  2. if your site uses HTTP 2 protocol, deferring the script tags with the “defer” attributes is the best method not to cause any rendered blocking issues.

// I use the Kinsta tutorials 
function defer_parsing_of_js( $url ) 
{
    if ( is_user_logged_in() ) return $url; 
    //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    //Check whether you're loading jquery.js or jquery.min.js in Browser's Network panel or source code
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
    
    
  

Elementor Beta (developer edition)

Beta and Developer editions are not recommended for production uses.

I am expecting people will install the Elementor Beta (Developer Edition) plugin because when you enable the Elementor Features because Elementor will automatically prompt you to install the plugin.

Elementor Beta (Developer Edition)

Solution: 

If you install the beta version or developer edition, I highly recommend reverting to the latest version of the Core Elementor and Pro versions and starting testing the functionalities of the Elementor Beta in LocalHost or staging environments.

If you accidentally upgraded the Core and Pro to beta or dev versions, watch the video below to learn how to properly revert to the original.

Elementor’s Features

Elementor’s Features are a great edition from Elementor to improve site functionalities and performance. But most of Elementor’s experiments are currently in the beta stages which means they will most likely it will break your site functionalities and overall design. 

The good news is that 2 of the features are already stable 

To make sure it doesn’t break your site’s overall functionality and design, install the plugin & test it in a staging environment or local host, and decide whether it is good to enable it or not. 

Three features that cause problems

  1. Improved Asset Loading (stable): Please Note! The “Improved Asset Loading” mode reduces the amount of code that is loaded on the page by default. When activated, parts of the infrastructure code will be loaded dynamically, only when needed. Keep in mind that activating this experiment may cause conflicts with incompatible plugins. Learn More about Optimized Assets Loading
  2. Improved CSS Loading (stable): Please Note! The “Improved CSS Loading” mode reduces the amount of CSS code that is loaded on the page by default. When activated, the CSS code will be loaded, rather inline or in a dedicated file, only when needed. Activating this experiment may cause conflicts with incompatible plugins. Learn More about conditional & inline CSS load experiment.

Improved Asset Loading & Improved CSS Loading are one of the Elementor Features that are stable

  1. Inline Font Icons (Beta)

The “Inline Font Icons” will render the icons as inline SVG without loading the Font-Awesome and the eicons libraries and its related CSS files and fonts. Learn More about the inline font icons experiments.

Inline Font icons experiments

– Solution:

  1. If your scripts are not loading properly, Deactivate the Improved Asset Loading to stop serving JavaScripts dynamically.
  2. If any dynamic CSS added by pop-up is missing, deactivate improved CSS Loading, this will stop removing unused CSS from the frontend stylesheets, and
  3. If any of the icons are missing and not rendering properly like on the pop-up, close or open icons just deactivate the Inline Font Icons, this will serve icon instead of inline SVG.

Set the CSS Print Method to an external file

The internal Embedding method can cause unexpected layout issues because the up-to-date CSS was not able to replace old CSS with your caching plugins.

What it does is, it will unnecessarily inline your frontend CSS which can increase your document size (HTML) and it can impact your First Contentful Paint (FCP) performance.

You can see how much CSS is added to the page from my foxscribbler’s case study.

CSS Print Method to external File

Regenerate CSS & Data

This is one of the most common issues I saw on Facebook and Reddit and sometimes even I forgot to click the Regenerate CSS & Data data.

When Elementor releases new updates, it updates automatically but sometimes it doesn’t and requires us to manually interact with the button. 

When it doesn’t we forget to update and because of this it ruins the navigation menu.

Solution

Whenever Elementor updates, just don’t forget to click the regenerate CSS and Data button and clear the cache. 

Styles set in Elementor are saved in CSS files in the uploads folder and the site’s database.

Recreate those files and settings, according to the most recent settings. When you click the button, it replaces the old one with the newer style

Regenerate CSS and Data

Caching

Caching can improve your site performance by downloading the assets to the user’s computer and store there for a certain period but if you cache your HTML it can cause more problems than good.

To solve this issue, you have to force refresh your browser cache by Ctrl + F5 on Windows and ⌘ Cmd +⇧ Shift + R on Mac

– Solution:

  1. If you update the Elementor or Elementor Pro plugin, just make sure you clear all the cache.
  2. If you’re in staging environments, disable caching or any performance plugin because your visitors wouldn’t be seeing your website.
  3. If you’re using Cloudflare (CF), or any CDN make sure you integrate with the performance plugin this way when you clear the cache, it will also clear the CDN cache.

If you have other ways to debug the issue, don’t forget to add your comments.

If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
  1. Buymecoffee
  2. PayPal or
  3. Buy products from my store
Thank you.

9 Responses

  1. Thank you so much, I have selected “Improved CSS Loading” in elementor setting/features and it fixed it!!

  2. Hi I read your post and thank you! But on my end, it was not working. T_T
    I used oceanwp and on the page which edited from elementor, the navigation menu in desktop are working while on the mobile view it is not visible or showing. I deactivate all the features in settings tab, and enabled all in the advanced tab, included of ‘Yes’ in Load Font Awesome 4 Support. I also clicked the Regenerate CSS & Data, I cleared the Cache many times, still not showing. What should I do T_T Please help

Leave a Reply

Your email address will not be published. Required fields are marked *