Mega Menu Navigation (Desktop) Creates High CLS

Hi there,

I don't believe mega menu CSS is the issue as mega menu doesn't actually display on first load.

I just ran the staging site through GTMetrix and CLS is at 0:
https://www.screencast.com/t/HJFIHR2bqA0s

The lab results for CLS don't seem to match up to the field data CLS report from Google Page Speed Insights, which seem to be what Google Search Console uses to determine whether or not you pass CLS validation. As a result, my site is still failing Core Web Vitals due to CLS.

I'm including a screenshot within the private information.

Using Chrome's Dev Tools within the performance tab you can see the specific CLS issues resulting from the menu. 5 out of the 6 CLS issues are resulting from the mega menu. I've highlighted the 2nd (and largest) CLS issue so you can see what CSS classes are being activated on the live page.

Hi there,

Layout Shifts come in two flavours Unexpected ( bad ) and Excerpted ( Good .. mostly ).
The most common Excepted shifts occur on a user initiated event. Such as opening a menu.

The Layout Instability API measures sets the hadRecentInput flag if a shift occurred within 500ms of user initiated event. The problem here is it only measures click, tap or key press events... NOT Hover.

How much of a contributing factor is CLS on page ranking is unknown, i would expect it to be pretty low. But if it is a concern, it seems the easiest mechanism to fix the issue is to change the Menu Dropdown from Hover to Click.

UPDATE: I run some tests - the issue isn't actually with the Mega Menu - its with the standard sub menu ... can you try adding this CSS and let us know if that fixes the issue:

.main-navigation ul ul {
  left: unset !important;
  height: auto !important;
}

Unfortunately, that CSS snippet did not seem to make any impact on the CLS. I am still seeing the same CLS issues identified within the Performance tab.

That CSS should improve the CLS on the non-mega-menu drop down.
For the Mega Menus - i cannot see why your site is experiencing that issue.
I set up a clean install and tested out a mega menu - and i did not get any CLS Issues:

https://www.screencast.com/t/80twnVYf1gO

Anychance you can disable any 3rd party scripts on the Staging site ?

Well...that is indeed further perplexing.

Per your suggestion, I progressively disabled all remaining customizations on the staging server.

1) I started by disabling everything I had added via elements. Still CLS issue.
2) Then I disabled all my CSS. Still CLS issue.
3) Then I disabled GP Premium plugin. Still CLS issue.
4) Then I disabled my child GP theme and just activated the default GP theme. Still CLS issue.

All other plugins are still disabled. This is as default as it gets. I really am completely lost as to what to even try next at this point.

Can you add in the Mega Menu CSS to the staging site - so we can check that ?

I added the mega menu CSS and the CSS fix included above. No changes.

Including screenshot in the private info.

Can you switch the Customizer > General > Structure to FlexBox.
And use the updated Mega Menu CSS here:

https://docs.generatepress.com/article/building-simple-mega-menu/

That seemed to fix the CLS issue with the navigation. However, it broke other CSS for the nav we had. In any case, I'll try to resolve that secondary CSS issue on my own.

Thank you very much for your help David & Leo. Appreciate your time and attention to help get this fixed!

Glad to hear we fixed the main issue.
If you need help with correcting the other issue - then raise a new topic and we can take a look!

Will do. Thanks, David.

:)

Hi,

I'm having the same problem with my navigation causing CLS issues and I am trying this solution but I can't find:
Customizer > General > Structure to FlexBox.

Do I need to enable a module to see this?

Thanks in advance!