Table of Contents
This is one of the many questions asked in Elementor’s Forum, Reddit, 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, recommendations, and Author end up filing a Github issue.
This is one of the recommendations I suggest.
I recommend preloading critical resources like web fonts, feature image/ critical images, JavaScript first in my earlier replies because preloading helps a lot, instructs the browser to download web fonts as soon as possible, and cache it but do not execute until the resources are downloaded, so when needs it by the browsers it is already available and it reduces the submenu indicator delay like margin that was my theory.
From the screenshot below, we can’t identify the submenu icon because it is small. So I highly recommend visiting the Filmstrip comparison link to get more detailed views.
Just reduce the playback 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.
If you enabled Inline Font icons Elementor’s experiments then this method is pretty much useless and it can end up slowing down your site performance.
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.
If you preload unnecessary resources it can:
- Browser’s main thread will be busy.
- Potentially it can affect your FID (field data), rendering, and FCP performance.
- Increase Page size (because unnecessary web fonts are loading).
- Potentially affect your LCP if you’re not preloading feature images.
Reasons
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.
Debug
After debugging with Chrome Dev tools- breaks on attribute modification, I found Elementor is depending on jQuery libraries and this is the JavaScript Elementor’s support is referring to.
Want to know how I figure it out? Here 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, 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.
When we create the primary 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.
That we don’t want it to happen on our website. So to solve this issue, we hardcoded 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.
When you choose your right menu, you will see a duplicate submenu icon the one you hardcoded and the other from Elementor.
We don’t want this and it doesn’t look good so we disable the submenu icon from Elementor’s Nav Menu widget.
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 in 0.25 playback speed.
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 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
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;
}
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.
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>
If you found this tutorial helpful and want to support me here are my links-
