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-
- Preloading critical resources.
- Inline Font icons
- 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:
- The browser’s main thread will be busy because the browser will have a hard time identifying which resources to prioritize.
- Potentially it can affect your rendering performance and FCP performance.
- 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.
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
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.
When you select the CSS classes to show advanced menu properties this will let you add CSS classes to the menu items.
Select the Menu that contains the sub-menu from the dropdown
Add the CSS classes
Add your unique CSS class to the CSS Classes (optional) field.
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.
Related
Edit with Elementor
Header template containing the submenu icon.
Click the (WordPress Menu widget) WordPress Menu’s handle
Now, click the WordPress Menu’s handle or Nav Menu (old) to edit the Menu.
Add this Custom CSS under advanced > custom CSS area or Elementor ‘s Custom code, and make sure you change the width value.
/*
* Adjust the width value according to 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
Mobile
No CLS issue detected
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-
- Buymecoffee
- PayPal or
- Buy products from my store
Thank you.
3 Responses
Hello, I recently came across your tutorial and found it extremely useful. Everything functions as expected, except for one issue: instead of displaying an arrow as intended, it shows a line. I’ve attached an image below for your reference. Could you assist me in resolving this? https://uploads.disquscdn.com/images/08f053bd1f72bea87562ea13637e4970ad8d6e8c0dfb895e010020a1b3ee9215.png
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.
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?