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.
The best method for fixing the submenu icon delay
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
We added the CSS classes to the WordPress menu items in the previous step. Now, we are going to edit the header template in Elementor’s Theme Builder and choose the menu with the sub-menu.
Related
Elementor Nav Menu Broken: 6 Ways To Identify & Troubleshoot
Free 6 WordPress plugins to create a transparent sticky header in WordPress & Elementor
Mastering Elementor Sticky Headers: Transparency, Shrinking Logos, and Dynamic Effects
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.Mastering Elementor Sticky Headers: Transparency, Shrinking Logos, and Dynamic Effects
/*
* 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 thoughts on “2 Easy Steps To Fix the Submenu icon indicator delay”
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?