Skip to Main Content

How to troubleshoot & Fix the Nav Menu Bug in Elementor pro

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

Picture credit to Dabrowka Szopa (https://web.archive.org/web/20220223032526/https://forum.elementor.com/fixing-common-issues-33/navmenu-bug-11398)

Broken Nav Menu in Theme Builder and frontend

In this tutorial, I will show you 5 ways to troubleshoot and fix the Nav Menu bug in Elementor Pro.

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

Causes of Navigation Menu (Nav Menu widget) bug in Elementor Pro

Combining & Minification JS:

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

If your site still using the HTTP/1.1 protocol, you can still combine JS but HTTP/2 is better, and it is highly recommended you change the hosting provider or choose CDN that supports HTTP/2.

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

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

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

Solution:

  1. Just defer the Script tags with priority hints to low.
  2. Choose better hosting providers & CDNs that support HTTP/2 like Cloudflare (CDN provider) or Runcloud + Digital Ocean or any server.

Plugins supports combine JS-

There are many caching solutions out there and these are some of the plugins I have known with.

  1. WP Rocket (Affiliate link): WP Rocket does offer minification and Combining JS into a single file but they also have the option not to combine it. So if your site supports HTTP/2 do not combine it.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 a problem there way to exclude the merge scripts.
  3. SG Optimizer (Site Ground Optimizer): SiteGround Optimizers offers a combined JS feature that allows you to combine JS into a single file.
  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?” this will optimize your JS and add defer attributes to all the JS.Click the Do not aggregate but to defer the script

Elementor Beta version (developer edition)

I saw lots of people install the Elementor Beta (Developer Edition) plugin when you enabled the Elementor Experiments feature.

If you’re one of them installing the beta version, I would recommend reverting back to the latest version of the Elementor Core and Pro version and installing the Elementor Beta in LocalHost environments.

Watch the Official video on how to revert back safely.

Disabled Elementor Experiments

Most of the Elementor’s experiments are currently in the beta stage which means they will most likely break your site functionalities and overall design. 

First, test the features in a staging environment or localHost and decide whether it is a good decision to enable the experiments or not.

Deactivate Improved Asset Loading & Improved CSS Loading experiments to fix the issue.

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

If Improved CSS loading breaks your styling, you can always follow my remove unused CSS in WordPress article.

Set the CSS Print Method to an external file

Sometimes inline CSS or internal Embedding features can cause problems because Caching plugin can’t update the code.

CSS Print Method to external File

Regenerate CSS & Data

When Elementor released New updates most of the time we forgot to Regenerate CSS & 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.

Regenerate CSS and Data

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.