[Resolved] Mega Menu Navigation (Desktop) Creates High CLS

Home Forums Support [Resolved] Mega Menu Navigation (Desktop) Creates High CLS

Home Forums Support Mega Menu Navigation (Desktop) Creates High CLS

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1657243
    Derek

    Like many in the forums, I’m working to reduce CLS as part of the Core Web Vitals update. I’ve reviewed numerous CLS related threads, but none of them seem to be the same issue I’m experiencing.

    Google Search Console is reporting high CLS for 100% of my desktop pages. I am fairly confident the CLS issue is resulting from the mega menu navigation. While using a CLS Chrome Extension to audit the page I am able to load and fully scroll through the page without any CLS. However, when I hover through the any of the menus my CLS shoots through the roof.

    One last night – I know there is a CLS issue resulting from my advertisements also. I’m also working on fixing those. If you view the site with an ad-blocker (as I am doing while testing) you can see the exclusive CLS issue on the navigation.

    #1657422
    Leo
    Staff
    Customer Support

    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

    #1657458
    Derek

    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.

    #1657691
    David
    Staff
    Customer Support

    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;
    }
    #1659589
    Derek

    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.

    #1660866
    David
    Staff
    Customer Support

    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:

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

    #1660936
    Derek

    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.

    #1660950
    David
    Staff
    Customer Support

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

    #1661030
    Derek

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

    Including screenshot in the private info.

    #1661075
    David
    Staff
    Customer Support

    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/

    #1663781
    Derek

    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!

    #1664195
    David
    Staff
    Customer Support

    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!

    #1664758
    Derek

    Will do. Thanks, David.

    #1664789
    David
    Staff
    Customer Support

    🙂

    #2135646
    Nicole

    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!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.