Skip to Main Content

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

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.

Appearance

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

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

Related

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. 
    
/* 
* Adjust the width value according the menu items text
* menu-item--has-submenu is the CSS class name
*/

li.menu-item--has-submenu{
    width: 140px
}

@media(max-width: 480px){
 li.menu-item--has-submenu{
    width: auto
}   
}
    

Results-

Desktop

No Layout shift Detected on Desktop

Mobile

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.
Picture of Kishorchand wearing Elementor Blue Shirt that I got it from wining Elementor Header competition

Thangjam Kishorchand Singh

Passionate about web performance, I specialize in assisting individuals and businesses in creating high-speed websites to elevate user experience, improve search rankings, and minimize bounce rates. I continually explore cutting-edge tools and techniques to optimize website performance, sharing insights through informative articles, engaging presentations, and valuable content.

Let's connect on my social media channels to engage in discussions about website speed and transform your site into a lightning-fast online experience.

Follow or chat with me -

Contact Me

3 Responses

    1. I am really sorry for not replying to your comments really soon, it is because there are clashes btn 2 communities in my state so govt. suspended the internet for 3 months.

      To answer your question, Thank you for reading my tutorial and I hope it really helps. If you still have issues please share the URL. Can you clarify which line is talking about first or second

      Thank you.

  1. Great instruction, I think it would be good to see a short video before/after. What I noticed though is, that even when the submenu icon is completely disable there will be a delay and a flash when refreshing the page. I didn’t test your method, but I assume it can work as the icon that is added via SVG/CSS uses the same space – so no flashing. But would it work also somehow when I do not want to show the submenu indicator at all?

Leave a Reply

Your email address will not be published. Required fields are marked *