This is one of the many questions asked in Elementor’s Forum (depreciated), Reddit, and Elementor’s official Facebook Group where none of the members were able to fix it including me. After digging and testing, I found out there is a way to fix the submenu icon indicator delay issue on the Nav Menu widget or WordPress Menu.

You can visit my demo link and see the result

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

From Elementor’s Official statements-

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.

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 Remove unused resources so it doesn’t block rendering and slow down our JS execution time.

Methods for fixing the submenu icon delay-

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

Preloading Critical Resources

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.

Preloading can be a Double-Edged Sword

If you preload unnecessary resources:

  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 HTML/ Documents size.

Inline Font Icons Features:

If you enabled Inline Font icons Elementor’s features then the above preload method is pretty much useless and 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

Custom CSS method with WordPress

You can enable Font Icons in Elementor’s features or disable them because, in this method, we are simply preserving the space of the icon.


WordPress's Appearance

When we create the menu, we know whether the menu will contain sub-menu items or not.

When you use the WordPress Menu widget on your website. By default, Elementor will check whether the navigation menu has a “sub-menu” or not by using jQuery and dynamically injecting 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.

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

Select the Menu that contains the sub-menu from the dropdown 

Select the menu that contains the sub menu

Add the CSS classes

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

Edit your header template in the Elementor theme builder 

In the previous step, we 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 Menu that has the sub-menu.


Picture written how to create Elementor Sticky headers
Create an Elementor Sticky Header: A Comprehensive Guide Works in 2024
Elevate Your WordPress Site with a Dynamic Elementor Sticky HeaderMaster the...
transparent sticky header with 6 free plugins
Free 6 WordPress plugins to create a transparent sticky header in WordPress & Elementor
In this Tutorials i will show you how to create transparent sticky header...
Elementor Nav Menu broken
Elementor Nav Menu Broken: 6 Ways To Identify & Troubleshoot
Here are the 5 ways to troubleshoot and Fix the Nav Menu bug in Elementor...

Edit with Elementor

Edit with Elementor Loading

Header template containing the submenu icon.

WordPress Menu

Click the (WordPress 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

Add this Custom CSS under advanced > custom CSS area or Elementor ‘s Custom code, and make sure you change the width value.

Use the Browser’s Dev tools and the Inspect elements functionalities to find the correct width of the menu item. 
Remove Unused CSS in WordPress
Remove unused CSS from Elementor website manually
In this step-by-step tutorial, we will learn how to manually remove unused...
  * Adjust the width value according the menu items text
  * menu-item--has-submenu is the CSS class name
    width: 140px

@media(max-width: 480px){{
    width: auto



No Layout shift Detected on Desktop


No Layout shift Detected on Mobile

No CLS issue detectedNo DOM effected

If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
  1. Buymecoffee
  2. PayPal or
  3. Buy products from my store
Thank you.