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.
- Combining & Minifying stylesheets and JavaScripts.
- Elementor Beta or Developer Edition plugin
- Elementor Features / Experiments
- Forgot or misses to Regenerate CSS and Data
- Caching.
Combining & Minifying stylesheets and JavaScripts:
– Plugins support both functionalities-
There are many caching & Optimization solutions out there and these are some of the plugins I have known that offer these functionalities:- 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
- 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 excluding 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?” to optimize your JS and add defer attributes to all the JS.
– Do and Don’t whether to combine or minify stylesheets or JavaScripts
Do: If your site supports HTTP/2 protocol, there is no point in combing JavaScripts (JS) and Stylesheets (CSS) into a single file to reduce HTTP requests. This is an old technique 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: If your site 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 supports the HTTP/2 protocol?
KeyCDN HTTP/2 is one of the most common testing tools.
– Solution
- Choose better-hosting providers ( Runcloud + Digital Ocean Droplets (Referal link) combo or with any server.) or CDNs that support HTTP/2 by default like Cloudflare (CDN provider)
- 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. I highly recommend is FlyingPress (Affiliate link).
// 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)
I am expecting people will install the Elementor Beta (Developer Edition) plugin because when you enable the Elementor Features/experiments Elementor automatically prompts you to install the plugin.
Solution:
Beta and Developer editions are not recommended for production uses. If you install the beta version, I highly recommend reverting to the latest version of the Elementor Core and Pro versions and starting testing the functionalities of the Elementor Beta in LocalHost or staging environments.
Watch the video below to learn how to properly revert back to original.
Elementor Features
Elementor’s Experiments or Features 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.
Three features that 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 about Optimized Assets Loading
– 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 about conditional & inline CSS load experiment.
– Inline Font Icons
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.
– Solution:
- If your scripts are not loading properly, Deactivate the Improved Asset Loading to stop serving JavaScripts dynamically.
- 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
- If all icons are broken like on the pop-up, just deactivate the Inline Font Icons, this will serve icon instead of inline SVG.
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
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
Solution
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 replaces the old one with the newer style
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:
- If you update Elementor or Elementor Pro plugin, just make sure you clear all the cache.
- If you’re in staging environments, disable caching or any performance plugin because your visitors wouldn’t be seeing your website.
- 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.
