- 1) Recommendation:
- 2) How do I Debug and find the issue?
-
3)
How to fix the sub-menu icon indicator delay issue?
- 3.1) Step#1: Appearance
- 3.2) Step#2: Screen Options
- 3.3) Step#3: Select your menu that contains the sub-menu
- 3.4) Step#4: Add the CSS classes
- 3.5) Step#5: Edit your Site header
- 3.6) Step#6: Edit with Elementor
- 3.7) Step#7: Click the WordPress Menu’s handle
- 3.8) Step#8: Disable the Submenu Indicator icon
- 3.9) Step#9: Convert inline SVG to URL encoder
- 3.10) Step#10: Inject CSS in the Custom CSS area
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:
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:
- 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 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.
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-
- (Video) Thinking of ways to solve a DARK/LIGHT THEME SWITCH
- (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).
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.
When you select the CSS classes to show advanced menu properties this will let you add CSS classes to the menu items.
Before
After
Step#4: Add the CSS classes
Add your unique CSS classes to the CSS Classes (optional) options.
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
In this tutorial, I will show you how to create a sticky header with elementor
In this Tutorials i will show you how to create transparent sticky header in WordPress
Rather than using Browser’s inspect elements to find the right item, WordPress has an inbuilt
Here are the 5 ways to troubleshoot and Fix the Nav Menu bug in Elementor
Step#6: Edit with Elementor
Step#7: Click the WordPress Menu’s handle
Now, click the WordPress Menu’s handle or Nav Menu (old) to edit the Menu.
To fix the issue, we have to disable the Submenu Indicator icon in the Layout tab.
Step#9: Convert inline SVG to URL encoder
FYI – I am using Font Awesome’s chevron-down on this demo.
Now, convert the SVG to a URL encoder, so it will be ready to use for CSS.
– Copy the Code snippet
– 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.
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.
We use the before and after pseudo-elements in this CSS
before and after Pseudo-Elements are really good ways to add style to the Elements without
/*
* 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%;
}
