Table of Contents
This is one of the many questions asked in Elementor’s Forum, Reddit, and Elementor’s official Facebook Group ( I saw it once when I was a member) where none of the members were unable to fix it including myself. After digging and testing, I found out there is a way to fix the submenu icon indicator delay issue.
And here is the demo link you can check out and see for yourself.
In the official Elementor’s Forum, We tried to answer the questions and comes up with many answers, and recommendations and the Author end up filing a Github issue.
This is one of the recommendations I suggest.
Preloading Critical Resources:
In my earlier replies, I recommended preloading critical resources because it instructs the browser to download the resources as soon as possible and cache them but does not execute until the resources are downloaded, so when browsers needed the resources, it is already available. Let’s say instead of taking 2 seconds to show the icon now it will take a few milliseconds to display and thus reduce the Layout shift.
So here is the Caveat, Preloading helps a lot but from my testing and experiments. Preloading is a double-edged knife.
In this case, it will improve LCP performance and reduce the CLS issues but it comes with the cost of increasing page weight which is not good if you’re serving lower-end hardware & slow connection users.
From the screenshot below, we can’t identify the submenu icon because it is really small. So I highly recommend visiting the Filmstrip comparison link to get more detailed views.
To see properly, Just reduce the playback speed of the video to 0.25
If you visited the link of the comparison and saw the video above, you can see there is a minor improvement when preloading the right web fonts but not even noticeable.
Inline Font Icons Experiments:
If you enabled Inline Font icons Elementor’s experiments then the above method is pretty much useless and it can end up slowing down your site performance by increasing Page weight.
The “Inline Font Icons” will render the icons as inline SVG without loading the Font-Awsome and the eicons libraries and its related CSS files and fonts.
Preloading is a Double-Edged Knife:
If you preload unnecessary resources it can:
- The browser’s main thread will be busy because the browser will have a hard time which resources to prioritize.
- Potentially it can affect your FID (field data), rendering, and FCP performance.
- Increase Page weight.
Reasons from Elementor’s Official-
This is happening because the Javascript checks if there is any sub menu item available before loading the HTML of the sub arrow icon. I agree this could be a good fix for UX, So I have added it to the list of our internal Improvement suggestions for our developers to consider.
How do I Debug and find the issue
After debugging with Chrome Dev tools- breaks on attribute modification, I found Elementor JavaScripts (JS) are depending on jQuery libraries and this is the JavaScript Elementor’s support is referring to.
Want to know how I figure it out? Here is the tutorial-
- (Video) Thinking on ways to solve a DARK/LIGHT THEME SWITCH
- (Article) Pause your code with breakpoints – Chrome Developers
As you can see JS takes time to load, parse and then execute the code, if your Script is large & running on low-end hardware, the browser will take more time.
To avoid these we use different optimization techniques like async, defer and delay so it doesn’t block rendering.
If you use defer and delay attributes, you will see a longer delay in the sub-menu icon than using the synchronous method (no optimization).
Tip: If you want you can try preloading jQuery too.
Step:1- Appearance:
When we create the menu, we know the menu will contain sub-menu items.
When you use the nav menu widget on your website. By default, Elementor will check whether the navigation menu has a “sub-menu” or not using jQuery ( see reasons & Debug) and dynamically inject CSS class “has-submenu” to the navigation items.
We just don’t want to rely on JS to add the CSS class and inject CSS.
To solve this issue, we have to hardcode inline SVG to the menu items themselves.
This is the part of the inline SVG, I copied from Elementor inline methods.
/*
* This is part of the SVG, you will get full SVG later at the end of the post. Copy and paste this code and add it to your submenu items.
* Please remove the comment when you're adding
*/
<svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-down" width="24" height="24" ><use xlink:href="#fas-angle-down"></use></svg>
To improve the screen reader experience, the best thing we can do is to hide the icon using the aria-hidden=”true” attribute to the inline SVG instead of the menu item.
Do not worry, this method will not affect others’ focusable elements like the submenu.
This will look like this.
You will see a duplicate submenu icon when you choose the right menu and the one you hardcoded.
We don’t want this and it doesn’t look good so we disable the submenu icon from Elementor’s Nav Menu widget – Layout – Submenu indicator.
Step:3- Comparison between inline SVG vs Preloading FA & Eicons vs Default:
As we can see from the filmstrip below inline SVG outperformed any other optimization. The Process is messy and we can see the submenu icon are visible much earlier (1.4sec) than any other method because we are not relying on JS.
You can see the comparison in detail or watch the comparison video at 0.25 playback speed.
Step:4- Debug and add the unique CSS class:
When you increase or decrease the font size of the main menu in Elementor’s typography settings. The icon does not match its settings. To fix this issue we apply a little bit of custom CSS.
Finding child elements is not going to be an easy task for those who don’t know how to use the Chrome Dev tools- inspect elements but WordPress has a nifty feature built-in for adding custom CSS classes under screen options (follow this tutorial if you don’t know) and it will look something like this after you add the CSS class. (CSS classes optional)
Now click the Nav Menu widget handle and click the Advanced tab and scroll down you will find Custom CSS and add the CSS I have added below.
If you see my 4th step, I add CSS classes of “el-icon”. So my CSS is.
/*
*Make sure your Width and Height values are exactly the same as Main Menu’s typography settings.
*If font size of the nav menu is 1.5rem then replace width and height with same value
*/
.el-icon svg
{
width: 2.6rem;
height: 2.6rem;
}
Step:6- Elementor pro’s Custom Code:
You remember the first step where I told you it is part of the entire SVG. Now in this step, we are going to inject the entire inline SVG Code into the entire website using Elementor’s Pro custom Code.
Hover your Mouse over to Elementor (Backend) and click the Custom Code and add the SVG code.
And here the SVG
<!--SVG code for angle down-->
<svg xmlns="http://www.w3.org/2000/svg" id="e-font-icon-svg-symbols" style="display: none;"> <symbol id="fas-angle-down" viewbox="0 0 320 512"> <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></symbol> </svg>
