• 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

a.j.drenth

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
  • Profile
  • Topics Started
  • Replies Created
  • Engagements
  • Favorites

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 7, 2021 at 1:11 pm in reply to: Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro #503704
    a.j.drenth
    Participant
    This reply has been marked as private.
    April 7, 2021 at 8:17 am in reply to: Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro #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.

    March 31, 2021 at 8:52 am in reply to: Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro #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 30, 2021 at 4:24 pm in reply to: Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro #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:)

    February 3, 2013 at 10:31 am in reply to: Help-locked out of my wp dashboard #17625
    a.j.drenth
    Participant

    I resolved it without use of FTP. Thank God!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

CTA

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

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 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