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

[ritofis733]

(On Mobile devices) In the digital pro theme mobile responsive menu, the items that are supposed to be hidden until the "Menu" button toggle is clicked flashes for a slight second causing Google to identify it is CLS issue. Because the layout shifts when the menu items are shown and then hidden. Even in the demo given here, https://demo.studiopress.com/digital/ has the issue, so it is not something site-specific.

As CLS is one of the Core Web Vitals now, any website running the Digital Pro theme will get affected (especially, the ones with less resourceful servers).

I tried to reproduce the issue with the Genesis sample that has a similar hamburger menu. It also has the same issue (You might have to use Ctrl+Shift+R to load uncached version). So, anyone have a fix for this?

https://demo.studiopress.com/digital/

[AnitaC]

Technically it's not an issue because this is an older theme. CLS is something new and is targeted to become a ranking factor in 2021. At the time this theme and many others were created, CLS wasn't even a consideration. I highly doubt StudioPress will go back in time to edit their themes for this. It would require some manual update on the users part to update it for CLS, if they felt that was important to them. If not, they'd find a theme that met those requirements.

As mentioned in the Search Engine Journal article, Google says there are five reasons for CLS.

1. Images without dimensions
2. Ads, embeds, and iframes without dimensions
3. Dynamically injected content
4. Web Fonts causing FOIT/FOUT
5. Actions waiting for a network response before updating DOM

So there are a ton of themes that would need to be updated. And again, I don't think theme developers will go back in time for something like this, but they will possibly think about this moving forward with new themes.

Since this wasn't an issue previously, maybe reach out to StudioPress and bring this to their attention. They do not visit the community forums.

---

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

[ritofis733]

According to me, it is something in its core framework, not child theme specific as I mentioned. Even the framework demo has the same issue of showing the menu for a few milliseconds before it disappears. It seems like the display: none, display: block property dynamically applied to the navigation menu using JS isn't designed to avoid CLS. The display: none property is missing in the navigation menu HTML element by default waiting for the CSS elements to be loaded that contains the required classes.

As I said, it is just a guess. I think if we can prepend the display: none property right into the HTML Nav element without waiting for the button to be touched, the issue could be resolved. Is there any workaround for this?

Also, this is not just for the sake of search engines, but also from a user perspective, the design seems pretty lazy when an unwanted menu item is shown disappearing all of a sudden which shouldn't be shown until the menu toggle is touched.

[AnitaC]

What device are you looking on when you see it display and then disappear?

---

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

[ritofis733]

You can use any mobile device (under 800px as per the theme code for displaying the hamburger menu) or the chrome developer tools to see the problem. Sometimes, you might wanna load the uncached version (Ctrl+Shift+R) to see the flash, as the servers of Studiopress are pretty fast which is not the case for all the sites.

[ritofis733]

Any update on this? Anyone like @braddalton have any fixes? I would really appreciate the help.

[AnitaC]

The reason why I asked what mobile device is because some things render different on different mobile devices. Where something works on Android it may not work on iPhone and vice versa. Some work in Safari and others don't.

---

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

[bilbri]

I am also looking to find a fix for this issue. I know that Google has said that CLS won't be a ranking factor until May, but I don't want to wait until the last minute to address this.

An example of this issue can be found here: https://suburbanhobbyfarmer.com/grow-tomatoes-in-a-hoop-house/

If you run this through GTMetrix or Google Page Speed Insights, you will seed that CLS is impacted.

[[email protected]]

Does Studiopress make any themes that don't have CLS issues? My Executive Pro theme has a Poor CLS score by Google Page Speed.

[AnitaC]

Executive Pro is an older theme. Google only announced the CLS last year. Your best bet on CLS right now is to reach out to StudioPress support. Only they can answer that question.

---

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

[AnitaC]

@jzjzhelps-com Core Vitals and CLS are something new that Google came up with prior to most of the Genesis themes being developed. So they didn't intentionally build something that was coded improperly or had a bug. It's only a "bug" because of Google and their new mandates.

A solution that is workng for many of us to get around that is below.

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.

---

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

[jonathonfowler]

I tried the fix posted by Anita, all it does is delete the menus completely on mobile devices. So I 'pass' the CLS test, but visitors cannot navigate my site 🙁

Is it possible to display the menu without the hamburger that causes the CLS issue?

Maybe time to move to another theme if this isn't addressed by the Studiopress team 🙁

---

Award-winning wedding photographer in Scotland

[AnitaC]

@jonathonfowler what theme are you using? Are you also using Digital Pro? Also provide a link to your website. My website is on Digital Pro, I used this same method and my menu does not disappear so you could have sort of a conflict.

---

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

[AnitaC]

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

---

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

[mathamatix]

OP..Were you ever able to get this resolved? I'm having the same issue exactly as you described with the same theme.

[AnitaC]

@mathamatix did you try the solution I gave above? What theme are you using? Are you using Digital Pro?

---

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

[mathamatix]

Hi Anita,
I'm going to try the suggestion you made above. Yes, I am using Digital Pro. For clarification, where does the above code need to be placed?

Thanks,
Math

[AnitaC]

Install the plugin and then add the code snippet to the Additional CSS box.

---

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

[mathamatix]

I tried your suggestion above on my staging site and it worked. The CLS number is now acceptable and passes.

What does the plugin do? I was a little bit nervous installing a plugin that hadn't been updated in three years. It works though and I'm glad for that. Thank you.

[AnitaC]

@mathamatix it's explained on the plugin page.

---

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

[Author]

Posts