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

Elementor Nav Menu broken

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

Issues related to why is the Elementor Nav Menu broken

1. Combining & Minification features:

If your site supports HTTP/2 protocol, there is no point in combing JS and CSS into a single file to reduce HTTP requests.

If your site still uses the HTTP/1.1 protocol, you can combine JS & CSS so it reduces the HTTP requests but in terms of Performance, handling multiple requests (multiplexing) I highly recommend switching to HTTP/2 and it is highly recommended by many performance experts or you change it to better hosting provider or choose CDN that supports HTTP/2 by default.

How to check if the site supports 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

Here is the Solution:

  1. Defer the script tags with the “defer” attributes and set the priority hints to low using fetchpriority=”low” so it doesn’t cause any rendered blocking issues.

    One of the best plugins that web performance experts highly recommend is FlyingPress (Affiliate link).

    FlyingPress v3.9 supports fetchpriority hints in version 3.9Credit to Gijo Varghese
        
        // 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.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
        
  1. Choose better-hosting providers or CDNs that support HTTP/2 by default like Cloudflare (CDN provider) or Runcloud + Digital Ocean Droplets (Referal link) combo or with any server.

Plugins support both combines & Minification JS & CSS functionalities-

There are many caching & Optimization solutions out there and these are some of the plugins I have known that offer these functionalities:

  1. WP Rocket (Affiliate link): WP Rocket does offer minification and Combining JS & CSS but they also have the option not to combine it if your site supports HTTP/2 protocol. If you have any issues, you can also refer to WP Rocket’s Doc Excluding External JavaScript from Combine
    File Optimization in WP Rocket settings
  2. Swift Performance (Affiliate): By default, Swift Performance will merge/combine scripts into a single file which sometimes causes problems. If you have any issues, you can refer to Swift Performance’s documentation exclude the merge scripts.
    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 supports HTTP/2.
    Just click the “Do not aggregate but defer?” to optimize your JS and add defer attributes to all the JS.

    Click the Do not aggregate but to defer the script

2. Elementor Beta version (developer edition)

I am expecting people to install the Elementor Beta (Developer Edition) plugin when they enable the Elementor Experiments features because of Elementor’s Prompt.

Elementor Beta (Developer Edition)

Beta and Developer editions are not recommended for production uses. If you install the beta version, I recommend reverting to the latest version of the Elementor Core and Pro and installing the Elementor Beta in LocalHost or staging environments first.

Watch the Official video on how to revert safely.

3. Disabled Elementor Experiments

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

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

These are the two experiments that usually cause problems –

Improved Asset Loading:

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

Improved CSS Loading:

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

Deactivate Elementor's experiements to fix the nav menu bug

Solution:
Deactivate Improved Asset Loading & Improved CSS Loading experiments
and see if it fixes the issue. If improved CSS loading breaks your styling, you can always follow my remove unused CSS  article.

4. Set the CSS Print Method to an external file

Sometimes inline CSS or internal Embedding features can cause unexpected problems because the up-to-date CSS was not able to replace old CSS by caching plugins.

What it does is, inline all the Frontend CSS to the site head tag which can increase your document size (HTML), impact First Contentful Paint (FCP) performance

CSS Print Method to external File

5. Regenerate CSS & Data

This is one of the most common issues I saw and happens sometimes on my site too. When Elementor released New updates, most of the time we forgot to click the Regenerate CSS & Data in Elementor > Tools > General > Regenerate CSS and Data

Here is what it does

Styles set in Elementor are saved in CSS files in the uploads folder and in the site’s database. Recreate those files and settings, according to the most recent settings.

When you click the button, it replace the old one with the newer style

Regenerate CSS and Data

6. Caching

Caching can improve your site performance for first-time and returning visitors but if you didn’t configure it properly it can cause more problems than good.

This usually happens when you cache HTML or Login users which can be great for LMS  but sometimes it can cause problems.

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 Elementor or Elementor Pro plugin, just make sure you clear all the cache.
  2. If you’re in staging environments, disable caching or the 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.

Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.

Scroll up further to Load all the comments...