• 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

Navigation menu cumulative layout shift

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 › Navigation menu cumulative layout shift

This topic is: not resolved

Tagged: cumulative layout shift

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 7, 2021 at 10:47 am #502956
    Viktor
    Participant

    Does anyone know how to fix the cumulative layout shift that is caused by a navigation menu. The DevTools show me that the dropdown menu is shifting the page. I'm using Genesis Sample Theme 3.3.0.

    Here's my current blog post: https://thediyplan.com/diy-floor-rocking-chair/

    Thanks

    https://thediyplan.com/diy-floor-rocking-chair/
    February 25, 2021 at 2:40 pm #503218
    Anita
    Keymaster

    This is a temporary solution that's working for many of us until themes or the framework has been updated.

    Install Genesis Js No-JS plugin by Gary Jones - https://wordpress.org/plugins/genesis-js-no-js/.

    Then add this snippet of CSS to your theme.

    .js nav {display: none;}
    @ media only screen and (min-width: 1024px) {
    .js nav {display: block;}
    } 
    

    Note - do not put the space between the @ sign and the word media. I had to do that because the forum was turning it into a link.


    Love coffee, chocolate and my Bella!

    March 14, 2021 at 7:59 am #503444
    jonathonfowler
    Participant

    Hi,

    I tried your fix Anita but it just completely removes my menu on mobile, which is clearly undesirable.

    Any idea how to get your fix to work on my site? Thanks.

    My site


    Award-winning wedding photographer in Scotland

    March 14, 2021 at 8:41 am #503448
    Anita
    Keymaster

    @jonathonfowler you posted on another thread about this issue. You are using the Ansel theme by Imagely and not a StudioPress theme. The handling of your menu may be different than those of StudioPress. I would suggest you reach out to Imagely about their theme to see if they can resolve that for you.


    Love coffee, chocolate and my Bella!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • 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

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