Solved

Elementor Header - Submenu icon indicator delay when refreshing/loading page.


Userlevel 1

Hello. Thanks for all Elementor devs for making and developing this awesome plugin that makes our lives easier.

The problem that I'm going to show is a general issue that occurs in every elementor header built in theme builder, including the own Elementor site (https://elementor.com).

When you refresh a page or load a new page, the submenu icon indicator will always disappear, and then show up again. That delay creates an awful blinking effect, and the menu will be moving from one point to another every time you change a page. I've asked some people about this problem, and they said that is caused by slow host, because the icon would take more time to load, but I think it's not the case for 2 reasons:

1° - It happens in the own Elementor site (https://elementor.com)
2° - Using another theme header builder, the Icon would always be there even if you reload a page, or load another page.

I've recorded a short video of this problem in https://elementor.com, as you can see below, everytime time I click on the home button, the sub menu indicator will disappear and appear again.
 

https://www.youtube.com/watch?v=SDl7hfKNwjg
 

I thinks that it could be fix in next patches, because there should be a way to make the submenu icons always loaded when navigating through the site, or making the header stay always loaded when changing pages. I guess there is a solution for this because others theme header do not have this problem, and the submenu icon is always loaded.

icon

Best answer by Colin F 26 July 2021, 17:05

View original

26 replies

Userlevel 6
Badge +3

Hi @thedaniel nice feedback.
I’m curious to follow expert’s replies so i subscribe to post.
Thank You

Userlevel 1

Hi @thedaniel nice feedback.
I’m curious to follow expert’s replies so i subscribe to post.
Thank You

Thanks. One of my costumer asked me that he did not like that that flashy sub menu icon delay. At first point, I thought it was a problem caused by cheap host, but I searched for days, and could not find a solution. After that, I started to look for others elementor sites, and even in the own Elementor store, it was happening.

So I want to address that issue to elementor devs.

Userlevel 6
Badge +3

Hi @thedaniel nice feedback.
I’m curious to follow expert’s replies so i subscribe to post.
Thank You

Thanks. One of my costumer asked me that he did not like that that flashy sub menu icon delay. At first point, I thought it was a problem caused by cheap host, but I searched for days, and could not find a solution. After that, I started to look for others elementor sites, and even in the own Elementor store, it was happening.

So I want to address that issue to elementor devs.

i hope that @Verdi Heinz or someone can take your post or i suggest you to open a ticket via https://my.elementor.com/support/

Userlevel 4
Badge +2

Hi @Daniel Nascimento,

Elementor can fix this issue very easily by

  1. By preloading custom font, this will increase/worst FCP (First contentful paint) but it will reduce CLS (Cumulative Layout shift).
  2. By Generating Critical CSS. Critical CSS is the CSS that are critical for above-the-fold content. 
  3. As per I know, Elementor is not using ‘FontAwesome Icon’ for their sub-menu, they use ‘Border’ CSS property to create a triangle. See the code below
.elementor-nav-menu--indicator-classic .elementor-nav-menu .sub-arrow .fa::before {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid currentColor;
display: inline-block;
transform: translateY(-50%);
}

If your client has this same issue,

  1. Generate Critical CSS
  2. Preload your custom fonts and font-awesome icon font-family, this will tell the browser to load the resources as early as possible.
Userlevel 6
Badge +3

 

  1. Generate Critical CSS
  2. Preload your custom fonts and font-awesome icon font-family, this will tell the browser to load the resources as early as possible.

1 - how to generate a critical CSS?

2 - How to preload something? 

 

May be are stupid quetions but i’m sure that not all know the reply :) 
Tha@Thangjam Kishorchand 

Userlevel 4
Badge +2

@Mario Barretta there are 3rd parties plugin, you can use to generate Critical CSS and preload critical resources automatically. 

These plugins are great but If you didn’t configure properly, it can break your site. so configure it properly.

I used few of them and information I shared below maybe outdated and incorrect.

Critical CSS:

  1. WP Rocket ( Paid)
  2. Swift Performance Lite/Pro (Free and Pro) with different method of generating Critical CSS.
  3. Flying-Press (Paid)
  4. Autoptimize + Critical CSS (integration) - Paid.
  5. Jetpack Boost ( Free).
  6. Critical Path CSS Generator by Jonas Ohlsson Aden (Free service) + Used CSS ( Chrome Extension free) - Free  and etc

Preload :

  1. WP Rocket ( Only on fonts & CSS)
  2. Autoptimize ( Can manually preload)
  3. Jetpack Boost (CSS)
  4. Flying-press ( above-the-fold Images , CSS, Fonts)
  5. Swift Performance Pro (Fonts, above-the-fold Image, can preload manually)
  6. Asset clean up pro ( Preload anything)

But if you ask me, what is the best plugin to recommended?

-- It is hard and it depends on your server configuration, plugins you install etc so please test it for yourselves in Staging Environments

Userlevel 6
Badge +3

@Mario Barretta there are 3rd parties plugin, you can use to generate Critical CSS and preload critical resources automatically. 

These plugins are great but If you didn’t configure properly, it can break your site. so configure it properly.

I used few of them and information I shared below maybe outdated and incorrect.

Critical CSS:

  1. WP Rocket ( Paid)
  2. Swift Performance Lite/Pro (Free and Pro) with different method of generating Critical CSS.
  3. Flying-Press (Paid)
  4. Autoptimize + Critical CSS (integration) - Paid.
  5. Jetpack Boost ( Free).
  6. Critical Path CSS Generator by Jonas Ohlsson Aden (Free service) + Used CSS ( Chrome Extension free) - Free  and etc

Preload :

  1. WP Rocket ( Only on fonts & CSS)
  2. Autoptimize ( Can manually preload)
  3. Jetpack Boost (CSS)
  4. Flying-press ( above-the-fold Images , CSS, Fonts)
  5. Swift Performance Pro (Fonts, above-the-fold Image, can preload manually)
  6. Asset clean up pro ( Preload anything)

But if you ask me, what is the best plugin to recommended?

-- It is hard and it depends on your server configuration, plugins you install etc so please test it for yourselves in Staging Environments

Thank You for suggests.
I’ll take them, both to other suggests, trying to learn something about this, for me, hard sector.
Thank you 

Userlevel 1

@Thangjam Kishorchand 

Thanks for the advise, but how do I pre-load specifically the submenu Icon that Elementor nav menu uses? 

I already use Wp-rocket and Asset cleanup for a long time, but I cannot find how to make them preload that particular Icon.

Userlevel 4
Badge +2

@Daniel Nascimento Elementor Nav menu widget - sub menu icon use Font-awesome icon. So if WP Rocket is not preloading fa-brands-400 , fa-brands-900.woff2 and Eicons file.

Then there the PHP script I use.

I use Code snippets plugin, so I don’t have to add opening tag and you might want check eicons version

 

function preload() {

?>
<link rel="preload" href="/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.10.0" as="font" type="font/woff2" crossorigin="anonymous">

<?php


}

add_action('wp_head', 'preload', 0);

 

Userlevel 7
Badge +4

Hello @Daniel Nascimento did you find your answer here? If so, please consider clicking “ Best answer” to help out others. If you found a solution somewhere else, please share it here so we can mark your answer as the best one, thanks!

Userlevel 1

This issue has been raised as a bug here: https://github.com/elementor/elementor/issues/14852

 

Please subscribe to show your support for getting it fixed.

Userlevel 1

This issue has been raised as a bug here: https://github.com/elementor/elementor/issues/14852

 

Please subscribe to show your support for getting it fixed.



Hello, I’ve created that github support post. I’m still waiting for an Elementor oficial talk about this.

Userlevel 1

Hello @Daniel Nascimento did you find your answer here? If so, please consider clicking “ Best answer” to help out others. If you found a solution somewhere else, please share it here so we can mark your answer as the best one, thanks!


Hello Susan, not Yet.

I’ve tried everything that people posted here, but nothing worked. I guess this bug is not solved, and this topic should not be mark as “solved”. 

Userlevel 1

I have raised it with Elementor support via my Pro account and they are investigation.  I will report back once I hear their conclusion. -C

I think i found a fix for this with CSS if you don’t want an arrow to show: select a dropdown icon show it is showing, then .elementor-nav-menu .sub-arrow {
    line-height: 1;
    padding: 0px 0 0px 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    display: none;
}

Userlevel 1

thanks @jezzasimonne, glad you found a solution for you.  I do need a submenu indicator so I can’t hide it.  I have a support case open with E at the mo so hopefully something will come from their investigations.  -C

Userlevel 1

Ok, great support from E :)  Here’s their explanation:

This is happening because the Javascript checks if there is any sub menu item available before loading the HTML of 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.

 

They provided some sample CSS to turn off the JS submenu item and replace it with a CSS/Font Awesome icon.  It does require that you turn off the pointer feature of the Nav Menu, but a small price to pay for the UX improvement.

 

I changed the font awesome icon to use the CSS arrow (thanks @Thangjam Kishorchand )

 

Steps that I took to implement this:

1 Edit page and select the Nav Menu element (in my case for the main page nav)

2 Set the Pointer attribute to ‘None’

3 on the Advanced tab, open the Custom CSS

4 Paste the below CSS in to the custom CSS.

.elementor-item.has-submenu .sub-arrow {
display: none;
}

.elementor-item.has-submenu:after {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid currentColor;
display: inline-block;
transform: translateY(-50%);
opacity: 1 !important;
right: 0;
/* set spacing between menu item text and arrow */
margin-right: 30px;
/* set vertical alignment of arrow */
margin-top: 7px;
}
  1. Update and clear any page cache needed to see change.

Work with mobile menu too.  -C

 

 

 

 

Thanks! Works great!I set the opacity to 0 to hide the CSS arrow completely.

Userlevel 6
Badge +3

Thanks! Works great!I set the opacity to 0 to hide the CSS arrow completely.

Great post and solutions.

Userlevel 1

@Imran Siddiq glad you found it useful.  If you want to remove submenu arrows completely, which looks like you do from you “opacity = 0” comment, you can just remove the CSS rule with the selector:

.elementor-item.has-submenu:after { ... }

That adds the CSS arrows, so remove the code to remove the CSS arrows.  Less CSS the better :)  - C

Badge

Ok, great support from E :)  Here’s their explanation:

This is happening because the Javascript checks if there is any sub menu item available before loading the HTML of 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.

 

They provided some sample CSS to turn off the JS submenu item and replace it with a CSS/Font Awesome icon.  …

 

Did they provide any detail as to when the fix will be applied to the plugin?

 

Userlevel 1

Hi @Sneaky, no.  Just said it would be added to their improvements list - no schedul eprovided or implied. -C

Userlevel 1

Part of the issue fixed in Elementor 3.4.0

“Nav Menu: Submenu Indicator spacing still present when 'None' selected”:

https://github.com/elementor/elementor/issues/15365#issuecomment-909662017

Badge

Is there an Elementor built in official fix coming for this any time soon?

HI All,

Thanks for your feedback, it has not worked for me, thanks for your help.

Can someone from Technical Support from Elementor Pro, let us know when this is going to be fixed, please.

Thanks

Reply