Skip to Main Content

10 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 (depreciated), 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.

In the official Elementor’s Forum, We tried to answer the questions and came up with many answers, and recommendations, and the Author ended up filing a GitHub issue.

Methods for fixing the submenu icon delay-

  1. Preloading critical resources.
  2. Inline Font icons
  3. With custom CSS methods.

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 recommend 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 need the resources, it is already available.

For example, 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, 

Preload lets you tell the browser about critical resources that you want to load as soon as possible before they are discovered in HTML. This is especially useful for resources that are not easily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.

In this case, it will improve LCP & FCP performance (icons will load much earlier) 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.

Preloading is a Double-Edged Knife

If you preload unnecessary resources, this will happen:

  1. The browser’s main thread will be busy because the browser will have a hard time identifying which resources to prioritize.
  2. Potentially it can affect your rendering performance and FCP performance.
  3. Increase Page weight.

To see properly, Just reduce the playback speed of the video to 0.25

Inline Font Icons Features:

If you enabled Inline Font icons Elementor’s features 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-Awesome and the eicons libraries and its related CSS files and fonts.

Inline Font Icons Features in Elementor's settings

Reasons behind the submenu icon delay-

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 debug and find the issue?

After debugging with Chrome Dev tools- breaks on attribute modification, I found Elementor JavaScripts (JS) depend on jQuery libraries and this is the JavaScript Elementor’s support is referring to (above).

Want to know how I figure it out? Here is the tutorial-

  1. (Video) Thinking of ways to solve a DARK/LIGHT THEME SWITCH
  2. (Article) Pause your code with breakpoints – Chrome Developers

FYI: 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, delay the scripts, and by Removing unused resources so it doesn’t block rendering and slow down our JS execution.

If you use the defer attributes and start to delay the scripts tag, you will see a longer delay in the submenu icon than using the synchronous method (no optimization).

Tip: If you want you can try preloading jQuery too but it is still unnecessary.

By WordPress Menu settings & Custom CSS method

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 / WordPress Menu 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 the CSS class “has-submenu” to the navigation items.

We do not need to rely on JS to add the CSS class and to inject CSS.

Step#2: Screen Options

Click the “Screen Options” in the top right corner next to the profile to open the dropdown menu.

Screen Options in WordPress

Select the CSS Classes in advanced menu properties options

When you select the CSS classes to show advanced menu properties this will let you add CSS classes to the menu items.


Before enabling CSS classes


After enabling CSS classes

Step#3: Select your menu that contains the sub-menu

Select the menu that contains the sub menu

Step#4: Add the CSS classes

Add your unique CSS classes to the CSS Classes (optional) options.

Add unique CSS classes

Step#5: Edit your Site header

In the previous step, you added the CSS classes to the WordPress menu items. Now, we are going to edit the header template in Elementor’s Theme Builder and choose the Header that has the sub-menu.


Step#6: Edit with Elementor

Edit with Elementor Loading

Header template containing the submenu icon.

WordPress Menu

Step#7: Click the (Nav Menu widget) WordPress Menu’s handle

Now, click the WordPress Menu’s handle or Nav Menu (old) to edit the Menu.

Click the WordPress Menu Handle

Step#8: Disable the Submenu Indicator icon

To fix the issue, we have to disable the Submenu Indicator icon in the Layout tab.

Disabled the Submenu Indicator icon

Step#9: Convert inline SVG to URL encoder

After you remove the submenu icon from the Layout tab, You can create an icon or use Font Awesome’s chevron-down.

Chevron Down Font Awesome Icon

Now, to inject the SVG in a custom CSS area we have to convert it to a URL encoder, so it will be ready to use for CSS. 

You can use any service like Font Awesome, or IconMonstr, or if you created your own you can also use Jake Archibald’s svgomg.
– Copy the Code snippet

Copy the code snippet from FA

– Edit the SVG or leave it as it is and copy the CSS

Head over to Yoksel’s URL encoder and paste the code snippets inside the “Insert SVG” area and after that copy the “Ready for CSS” dataURI and add it to the custom CSS area.

URL-encoder for SVG

Step#10: Inject CSS in the Custom CSS area

In the Previous step, we disabled the submenu icon, to bring back the icon we will inject our own inline SVG or DataURI we copied as the background-image CSS properties.

WordPress Menu Custom CSS

We use the before and after pseudo-elements in this CSS (You can copy the CSS below) 

* Disable the sub-menu

.elementor-item.has-submenu .sub-arrow {
display: none;

*To put the pseudo-elements inside the parent CSS, we use position relative

.menu-item--has-submenu a{
    position: relative;
    transition: none!Important
* Your CSS class and Background-image will be different from mine

.menu-item--has-submenu a:not(.elementor-sub-item)::after{
    background-image: url('data:image/svg+xml,%3Csvg fill="%23fff" width="24" height="24" xmlns="" fill-rule="evenodd" clip-rule="evenodd"%3E%3Cpath d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"/%3E%3C/svg%3E');
    height: 1rem;
    width: 1rem;
    background-repeat: no-repeat;
    top: 55%;
    transform: translateY(-50%);
    opacity: 1!important;
    background-size: 90%;

If you found this tutorial helpful you can support me by buying me a cup of coffee- 

  1. Buymecoffee
  2. PayPal or
  3. Buy products from my store

Thank you.

Thangjam Kishorchand

Thangjam Kishorchand

Hi there! I'm Kishorchand, and this is my blog where I share my Elementor tips and tricks that I've learned over the past two years. I'm mostly active on Quora and Facebook, and I love experimenting with design trends like variable fonts and dark mode.

Upgrade to Elementor pro Today

Scroll up further to Load all the comments...