Fix Block Theme Navigation with WP Rocket

WP Rocket is good for a lot of things. It makes even the most complicated websites at least a little bit faster.

But the more WP Rocket features you enable, the more things that are liable to break.

Block Navigation Responsive Container

For example, WP Rocket offers a great feature called “Remove Unused CSS”. As the name implies, it removes CSS rules that don’t appear to be relevant to a particular page on your website.

However, this can easily break for CSS rules that aren’t used until a user interacts with something.

For example, the CSS that allows the little “hamburger” menu in WordPress block themes to pop out your menu isn’t needed on the page until someone taps that hamburger. WP Rocket’s tool that figures out what CSS it needs does not tap the hamburger. So it removes all the styles that are supposed to show the menu when you tap the hamburger.

If you’ve noticed that your block theme’s mobile navigation hamburger button doesn’t do anything on your phone or other mobile device, this is probably why.

To be specific, this is probably you if you’re:

• Using a block theme, like Twenty Twenty Four
• Your header includes the core Navigation block
• You’ve enabled WP Rocket’s Remove Unused CSS optimization
• Your mobile nav menu doesn’t pop out when you tap the hamburger icon

This is an easy fix. WP Rocket allows you to manually define rules, like CSS classes, that should never be removed from the CSS. For example, CSS that might be needed on every page of your website that their little crawler just doesn’t know about.

CSS Safelist

Navigate to Settings > WP Rocket in your WordPress admin to get to the WP Rocket settings. In the File Optimization tab, if you’ve enabled “Remove Unused CSS”, you’ll see a text box labeled “CSS safelist”. In this box, enter the following:

(.*).is-menu-open(.*)
(.*).has-modal-open(.*)
(.*).wp-block-navigation__responsive-close(.*)
(.*).wp-block-navigation__responsive-container-close(.*)Code language: CSS (css)

And that’s it! WP Rocket will reprocess the CSS on your website and will not remove the code that makes the nav menu work. Your mobile users will thank you.