Table of Contents
- 1 Causes of Navigation Menu (Nav Menu widget) bug in Elementor Pro
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.
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.
- Just defer the Script tags with priority hints to low.
- 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.
- 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.
- 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.
- SG Optimizer (Site Ground Optimizer): SiteGround Optimizers offers a combined JS feature that allows you to combine JS into a single file.
- 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.
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
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.
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.
If you have other ways to debug the issue, don’t forget to add your comments.