- 1) Methods for fixing the submenu icon delay-
- 2) Preloading Critical Resources:
- 3) Inline Font Icons Features:
- 4) Reasons behind the submenu icon delay-
-
5)
By WordPress Menu settings & Custom CSS method
-
5.1)
How to fix the submenu icon indicator delay issue?
- 5.1.1) Step#1: Appearance
- 5.1.2) Step#2: Screen Options
- 5.1.3) Step#3: Select your menu that contains the sub-menu
- 5.1.4) Step#4: Add the CSS classes
- 5.1.5) Step#5: Edit your Site header
- 5.1.6) Related
- 5.1.7) Step#6: Edit with Elementor
- 5.1.8) Step#7: Click the (Nav Menu widget) WordPress Menu’s handle
- 5.1.9) Step#8: Disable the Submenu Indicator icon
- 5.1.10) Step#9: Convert inline SVG to URL encoder
- 5.1.11) Step#10: Inject CSS in the Custom CSS area
-
5.1)
How to fix the submenu icon indicator delay issue?
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.
- Preloading critical resources.
- Inline Font icons
- With custom CSS methods.
This is one of the recommendations I suggest.
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.
For example, 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 happen:
- 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.
From 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 debug and find the issue?
After debugging with Chrome Dev tools- breaks on attribute modification, I found Elementor JavaScripts (JS) depend on jQuery libraries and this is the JavaScript Elementor’s support is referring to (above).
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
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 by Removing unused resources so it doesn’t block rendering and slow down our JS execution.
If you use the defer attributes and start to delay the scripts tag, you will see a longer delay in the submenu icon than using the synchronous method (no optimization).
Tip: If you want you can try preloading jQuery too but it is still unnecessary.
By WordPress Menu settings & Custom CSS method
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.
Related
Elevate Your WordPress Site with a Dynamic Sticky Header Using Elementor
Master the art of creating
In this Tutorials i will show you how to create transparent sticky header in WordPress
Here are the 5 ways to troubleshoot and Fix the Nav Menu bug in Elementor
Step#6: Edit with Elementor
Header template containing the submenu icon.
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
After you remove the submenu icon from the Layout tab, You can create an icon or use Font Awesome’s chevron-down.
Now, to inject the SVG in a custom CSS area we have to convert it 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 inside the “Insert SVG” area and after that copy the “Ready for CSS” dataURI and add it to the custom CSS area.
Step#10: Inject CSS in the Custom CSS area
In the Previous step, we disabled the submenu icon, to bring back the icon we will inject our own inline SVG or DataURI we copied as the background-image CSS properties.
We use the before and after pseudo-elements in this CSS (You can copy the CSS below)
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%;
}
If you found this tutorial helpful you can support me by buying me a cup of coffee-
- Buymecoffee
- PayPal or
- Buy products from my store
Thank you.
