Skip to Main Content

The 6 Easy Steps To Fix the Submenu icon indicator delay

With many attempts to fix the submenu icon indicator delay in the Elementor Nav Menu widget in the Elementor's Forum, this is one of the moments where officials can't solve the issue because of JS dependencies but the community tries to fix it. In this step-by-step tutorial, I am going to show you how to fix the issue pretty easily with proof.

fix the submenu icon indicator delay in nav menu widget

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:

Pictures showing how to preload web fonts using PHP method

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.

Picture showing the comparision between Preloading webfonts and not preloading and see which is better but it was just a margin of improvements

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.

Picture showing how to enabled Inline Font Icons Elementor's experiements

Preloading is a Double-Edged Knife:

If you preload unnecessary resources it can:

  1. The browser’s main thread will be busy because the browser will have a hard time which resources to prioritize.
  2. Potentially it can affect your FID (field data), rendering, and FCP performance.
  3. 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-

  1. (Video) Thinking on ways to solve a DARK/LIGHT THEME SWITCH
  2. (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.

How to Fix the submenu icon indicator delay issue?

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.

Picture showing where to add the inline SVG with accessibility in mind

This will look like this.

Adding inline SVG to the parent menu

Step:2- Remove the Duplicate icon & disable Submenu Indicator

You will see a duplicate submenu icon when you choose the right menu and the one you hardcoded.

Picture showing there is duplicate submenu icon present before we hardcoded and Elementor injected

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.

Disable submenu indicator icon

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.

Picture showing the inline SVG outperformed preloading and not preloading
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.

Icons size were mismatch, when we increase or decrease font size of nav menu's typograpgy settings

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)

Picture showing where to add the inline SVG with accessibility in mind

Step:5- Style the submenu icon

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.

Style the submenu item with 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;
}
				
			

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.

Picture showing how to inline SVG code to the head tag of the website

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-

  1. Buymecoffee
  2. PayPal

Cheers

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.