[Support request] Mobile Menu Works on Some Pages and Not on Others in Chrome and Firefox

[Paul]

Sorry about that, I’ve posted a new link.

[Fernando]

It seems to be working now. I assigned a Menu to the Off Canvas Panel through Appearance > Menus.

See: https://share.getcloudapp.com/Qwu8dzdZ

Can you check from your end?

[Paul]

I checked and the menu you assigned works on the staging site, but the you didn’t use the primary navigation menu. I need the primary navigation menu to work with the mobile “hamburger”. I tried assigning the primary navigation menu to the primary menu position, the off canvas menu position and both. It never displays correctly. I still see the dark screen without the menu sliding in from the right.

Please try to get the primary navigation menu to work.

[Fernando]

I see. That’s the default behavior.

An approach to have both active on mobile is to go to Appearance > Customize > Layout > Primary Navigation, and set the Mobile Menu Breakpoint to 0. Reference: https://docs.generatepress.com/article/primary-navigation-layout-overview/

[Paul]

Hi Fernando,

The business is closed right now so I tried that on the live site. Setting the mobile breakpoint to 0 didn’t change anything for the display of the Primary Navigation menu. It’s still not displaying on the homepage and the other pages when I test it on my phone using Chrome.

[David]

Hi there,

i checked your live site and i do not see the mobile menu.

if however i disable WP Rocket by adding the ?nowprocket query string to the URL eg.

https://yourwebiste.com/?nowprocket

then the menu is visible.

can you try disabling the CSS optimization options in WP Rocket and retest the site ?

[Paul]

I selected Load CSS Asynchronously and that fixed the issue. Thank you!

It’s interesting. The other Generate Press site I have has no problems with WP Rocket set to Optimize CSS Delivery by Removing CSS. That site uses the Coach starter site.

So perhaps the different starter sites respond differently to WP Rocket settings.

[David]

Ill try to explain what is happening 🙂
(most) Themes and Plugins load their CSS either as an external .css stylesheet or as an inline style. And the instructional code to tell the browser to load that CSS is added using wp_enqueue functions that are part of WordPress.

Now our CSS is organised and loaded in the way we know it needs to be for it to work. And all things are good 🙂

WP Rocket hijacks this process. It scrapes together all the CSS from the site, it audits it for what it sees as being critical and non critical, combines and optimizes those batches of CSS and saves it in cached files or as an inline style. Removing any “unused CSS” along the way. Then it removes our instructions to load our CSS ( and that of other plugins ) and adds its own instructions to load its saved CSS.

The Theme ( or plugin ) has no knowledge or involvement in any of this process.

So why does Optimize CSS Delivery by Removing CSS work on one site and not the other ?

That is a question for WP Rocket. But it may be a simple case that when the original Critical CSS was created the Off Canvas CSS hadn’t be loaded so it got ignored, and getting WP Rocket to regenerate that CSS may fix the issue. Ask WP Rocket to see what they have to say 🙂

[Author]

Posts