Skip to Main Content

How to Fix the Submenu icon indicator delay?

With many attempts to fix the submenu icon indicator delay in the Nav Menu widget, this is one of the moments where officials can't solve the issue but the community fixes 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, 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.

Pictures showing how to preload web fonts using PHP method

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.

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

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.

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

If you preload unnecessary resources it can:

  1. Browser’s main thread will be busy.
  2. Potentially it can affect your FID (field data), rendering, and FCP performance.
  3. Increase Page size (because unnecessary web fonts are loading).
  4. Potentially affect your LCP if you’re not preloading feature images.


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.


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

  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, 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.

How to fix the submenu icon indicator delay?

Appearance then Menu:

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.

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

Remove Duplicate icon & disable Submenu Indicator

When you choose your right menu, you will see a duplicate submenu icon the one you hardcoded and the other from Elementor.

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.

Disable submenu indicator icon

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 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.

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 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

Style the submenu icon

Now click the Nav Menu widget handle and click the Advanced tab and scroll down you will find Custom CSS

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;

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.

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="" 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
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.