• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › General Genesis Framework Discussions › Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro

This topic is: not resolved

Tagged: CLS, core web vitals, Magazine Pro

  • This topic has 77 replies, 34 voices, and was last updated 1 year, 8 months ago by Maarklarius.
Viewing 20 posts - 21 through 40 (of 78 total)
← 1 2 3 4 →
  • Author
    Posts
  • March 30, 2021 at 4:24 pm #503631
    a.j.drenth
    Participant

    I put a lot of hours into this issue. I tried the plugin mentioned above as well as PHP solutions. Nothing consistently changed the Google CLS score.

    Fortunately, I think I finally found the solution. When I saw how simple it was, I almost kicked myself.I'm using the Outreach Pro theme, but I suspect this will work for other Genesis themes as well. I'll provide the solution, followed by an explanation:


    @media
    only screen and (max-width: X) {
    .genesis-nav-menu {
    display:none
    }
    }
    Note for "X" add the screen size in pixels at which your theme adds the responsive menu icon (i.e., "hamburger" menu).

    Since I didn't know much Javascript, I never bothered to try the above solution previously. But after I learned about how the Javascript / JQuery "toggle" function works (which is used in your Genesis child theme), I learned that it essentially reverses whatever your CSS display setting is on an element (i.e., If the CSS is set to display:none, it will display it. Then, if clicked again, it will hide it.). Knowing this, it makes perfect sense why we would want the menu hidden until the hamburger icon is clicked.

    Next question: Why doesn't Studiopress just code it this way to begin with? I suspect it's because they want the navigation menu to be displayed for users who don't have Javascript enabled. But research suggests that only 1-2% of web users don't have Javascript enabled. So unless you're okay with compromising your site's UI/UX for a handful of individuals who, for whatever reason, have chosen to disable javascript in their browser, this seems like an obvious solution to the problem.

    BTW, I was shocked at how much cleaner my page loads look have looked since implementing this solution. Truly a night and day difference. You'll never see an unwanted menu item again:)

    March 30, 2021 at 4:45 pm #503633
    AnitaC
    Keymaster

    But the thing that people are missing here, and I am not defending StudioPress, but actually all theme designers - Google pulled this out of their hat. Plain and simple. No one ever would have expected Google to come up with this stuff. You are working on an old theme. Outreach was created years ago (2013) and it won't ever be updated again. It was created for that particular time period and worked as it should.

    The menu is not the only thing associated with the Cumulative Layout Shift. It's anything that moves when the page loads. A lot of people don't realize that a lot of things shift.

    Everyone's sites are different so resolution to CLS is going to be different for each one even if the menu is fixed.


    Need help with customization or troubleshooting? Reach out to me.

    March 31, 2021 at 8:52 am #503652
    a.j.drenth
    Participant

    Hey Anita,

    I wasn't trying to throw shade at Studiopress, whose products I've been happily using for years. I do think that if there's an elegant fix available, Studiopress should consider helping its legacy theme users with a solution, perhaps via Genesis core updates if feasible.

    I agree with you that CLS is a relatively new and multifaceted issue. In my case, however, the menu item flashing problem was accounting for roughly 2/3rds of my CLS score. Once I implemented the above fix (and also added height values to the .nav-primary class at different screen sizes to prevent layout shifting while the icon loads) the score (and user experience) improved dramatically.

    Thanks for your work moderating this forum!

    March 31, 2021 at 9:05 am #503653
    AnitaC
    Keymaster

    @a-j-drenth Thank you, I appreciate that. So, StudioPress just released an update to Genesis Sample. Here is the Changelog.

    Three key things there that were updated:

    * Implement preconnect for Google Fonts.
    * Improve Content Layout Shift (CLS) occurring when using a custom logo.
    * Improve Content Layout Shift (CLS) caused by the mobile menu.

    I think... and I don't want to speak on their behalf, but I think their focus right now is on Full Site Editing and Genesis Blocks, Genesis Blocks Pro and Genesis Pro (the theme). They are still working on updating the Framework as well, plus updating some of the more recent child themes.

    They sell a lot of themes and again, your theme was created almost 8 years ago. So the likelihood of them going back that far and updating it is pretty slim.

    And... Google can't expect theme developers to just stop everything they are doing to accommodate what they are asking. It's just not reasonable. I'm struggling with that myself with customers.


    Need help with customization or troubleshooting? Reach out to me.

    April 6, 2021 at 8:32 pm #503694
    jtwillia2
    Participant

    Thank you for the discussion and proposed solutions. Unfortunately they don't seem to work on my site using the Magazine Pro theme.

    April 6, 2021 at 8:46 pm #503696
    AnitaC
    Keymaster

    @jtwillia2 what's the URL of your website?


    Need help with customization or troubleshooting? Reach out to me.

    April 6, 2021 at 8:53 pm #503697
    jtwillia2
    Participant

    https://www.theoptimizingblog.com/

    I've removed the code after trying it unsuccessfully though.

    April 6, 2021 at 8:58 pm #503698
    AnitaC
    Keymaster

    @jtwillia2 take a look at the Genesis Sample Changelog. See what was updated there. You may be able to implement some changes from the Sample.


    Need help with customization or troubleshooting? Reach out to me.

    April 6, 2021 at 9:34 pm #503699
    jtwillia2
    Participant

    @Anita I was checking that out but honestly, trying to translate that into what specifically I'd need to add to my theme is a bit outside my skill set. May see if my developer friend can use that resource and help me out.

    The small piece of code from @a.j.drenth above is the closest I've gotten. It seems to work between 840px (where it goes to hamburger) and 600px, but below 600px the menu won't expand: https://wordpress-572906-1855295.cloudwaysapps.com/

    April 7, 2021 at 3:27 am #503700
    jonathonfowler
    Participant

    I changed my theme to use the Genesis Sample theme. CLS test is now a pass and my theme is more legible and cleaner looking.

    My homepage mobile score is 92, and on desktop, it's 100. Thank you Studiopress!

    My wedding photography website

    Pagespeed Insights test results


    Award-winning wedding photographer in Scotland

    April 7, 2021 at 8:17 am #503701
    a.j.drenth
    Participant

    @jtwilia2

    Try changing it to: .genesis-nav-menu ul {display:none}

    It seemed to work when I tried it in page inspector.

    April 7, 2021 at 12:15 pm #503703
    jtwillia2
    Participant

    @a.j.drenth So the whole piece would be:

    @media only screen and (max-width: 840px) {
    .genesis-nav-menu ul {display:none}
    }

    ?

    This didn't do anything. But I also don't have .genesis-nav-menu ul referenced anywhere else in the CSS.

    April 7, 2021 at 1:11 pm #503704
    a.j.drenth
    Participant
    This reply has been marked as private.
    April 7, 2021 at 4:23 pm #503705
    AnitaC
    Keymaster

    You can drop the CSS into the Additional CSS box under Appearance > Customize. Clear any caching, and then run the test.


    Need help with customization or troubleshooting? Reach out to me.

    April 29, 2021 at 11:49 am #503891
    mantic59
    Participant

    Been struggling with CLS on my site (uses the Authority Pro theme) and just came across this thread from some google-fu. I'm not a developer so I've been looking for a copy/paste solution. I loaded the js/nojs plugin and the css (from the 1st page of the thread) in my staging site and the results were very encouraging indeed.

    Just put it in the production site, tested with Google PageSpeed Insights, and my CLS went from ~.15 to...~.004.

    Thanks to all in this thread, particularly @Anitac!

    April 29, 2021 at 2:08 pm #503893
    AnitaC
    Keymaster

    You're welcome @mantic59!


    Need help with customization or troubleshooting? Reach out to me.

    May 11, 2021 at 5:09 pm #504004
    anujsainicse
    Participant

    I fixed the issue by preloading the required web fonts

    May 26, 2021 at 8:00 pm #504133
    Jack33
    Participant

    Has anyone found a more robust fix for this than the plugin idea above? @ritofis733 did you have any luck? Seems to be an issue across all child themes implying it's an issue with underlying framework.

    May 26, 2021 at 9:57 pm #504134
    Jack33
    Participant

    I'm attempting to fix this CLS issue for Essence Pro. I can't get any of the above suggestions to work, and I'm struggling to adapt the updates from the Genesis Sample changelog. Anyone have any ideas for Essence Pro specifically? (I'm aware it's an older theme)

    June 3, 2021 at 10:58 pm #504206
    thenerdynurse
    Participant

    Any tips on this for the Wellness Pro theme?

    Seems it has stopped loading the mobile menu altogether and giving all kinds of CLS error because of it.

    Site: https://www.freshrn.com

    Page speed example: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.freshrn.com%2Fbest-nursing-jobs-for-new-nurse-grads%2F&hl=en


    Patient, Nurse, and Technology Advocate at The Nerdy Nurse.

  • Author
    Posts
Viewing 20 posts - 21 through 40 (of 78 total)
← 1 2 3 4 →
  • You must be logged in to reply to this topic.
Log In

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble