Navigation menu cumulative layout shift

[ViktorParticipant]

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/

[AnitaKeymaster]

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.

---

Training & Request a Customization | Recommended Genesis Developer | My WordPress & Genesis Tutorials

[jonathonfowlerParticipant]

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

[AnitaKeymaster]

@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.

---

Training & Request a Customization | Recommended Genesis Developer | My WordPress & Genesis Tutorials

[Author]

Posts