Skip to Main Content Skip Table of 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.

This is one of the recommendations I suggest.

Recommendation:

– 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. 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 happens:

  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

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 of 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, delay, & Removing unused resources so it doesn’t block rendering and slow down.

If you use defer attributes and delay the scripts tag, 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 but it is still unnecessary.

How to fix the sub-menu 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

Before enabling CSS classes

After

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 you wanted to fix the issue.

Related

Step#6: Edit with Elementor

Edit with Elementor Loading

WordPress Menu

Step#7: Click the 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

FYI – I am using Font Awesome’s chevron-down on this demo.

Chevron Down Font Awesome Icon

Now, convert the SVG 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 and after that copy the “Ready for CSS” and add it to the custom CSS area.

URL-encoder for SVG

Step#10: Inject CSS in the Custom CSS area

We have disabled the submenu icon in the previous method, to bring back the icon we will inject our own inline SVG into the icon as background-image.

WordPress Menu Custom CSS

We use the before and after pseudo-elements in this CSS

        
        /* 
* 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{
    content:'';
    background-image: url('data:image/svg+xml,%3Csvg fill="%23fff" width="24" height="24" xmlns="http://www.w3.org/2000/svg" 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%;
    left:92%;
    transform: translateY(-50%);
    opacity: 1!important;
    background-size: 90%;
}
        

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.

Scroll up further to Load all the comments...