[Support request] Exclude hamburger menu from “Remove Unused CSS” WP feature

[Eric]

Hi, I’m trying to use the beta WP rocket feature described here: https://docs.wp-rocket.me/article/1529-remove-unused-css

Unfortunately, it seems to break the GP hamburger menu. They give a few options for excluding the css including css filename, ID or class.

Could you help me identify which files or classes to include to keep the menu functioning? I’ve tried using classes, but I’m unable to get it to remain functional. Thanks so much!

[Elvin]

Hi Eric,

Unused CSS file or lines are normally indicated in Google PSI. It’s included on the report.

Have you checked if there’s actually an unused CSS? Can you link us to the site you’re working on to check? (without removing unused CSS settings on WP Rocket)

[Eric]

I think you are misunderstanding my question. I’m not looking for the css lines or files that aren’t being used.

I’m looking for the files or css classes that contain the hamburger menu for the GP theme, so that this wp rocket feature continues to include it, and doesn’t falsely mark it as “unused”.

[Elvin]

I’m looking for the files or css classes that contain the hamburger menu for the GP theme, so that this wp rocket feature continues to include it, and doesn’t falsely mark it as “unused”.

Ah right.

Here’s the normal structure. https://share.getcloudapp.com/o0ueGrlP

button.menu-toggle is the main ancestor element selector.

span.gp-icon.icon-menu-bars is the parent class selector of the svg element. Not exactly sure what WP Rocket needs.

Also, if the menu itself isn’t working as it should then perhaps the scripts involved are affected as well.

[Eric]

I tried this, and the menu functionality is still not working. Could you perhaps give me the style files that deal with this menu?

I tried turning off all of my javascript optimizations as well. Thanks.

[Eric]

One other thought, it might be that the styles for the offscreen menu are being removed. What classes or files are used for the menu which appears when the hamburger menu icon is pressed?

Thanks again.

[Elvin]

From GP premium, it’s these files:

JS – https://share.getcloudapp.com/o0ueXoWw
CSS – https://share.getcloudapp.com/Kou410vd

From GP theme, it’s these ones:
JS – https://share.getcloudapp.com/2Nuq7JdX

For the CSS, it’s a mix from main, style and mobile.css found here – https://github.com/tomusborne/generatepress/tree/master/assets/css

[Eric]

I think I got it to work. I used this catchall that seems to be stopping WP rocket from removing any GP css with this feature.

/wp-content/plugins/gp-premium/(.*).

And my “remove unused css” notifications in google page speed insights are gone!

[Elvin]

I believe this is sorted out? Let us know if you need further help. 🙂

[Abhishek]

Hi Eric,
Can you please describe what you did there.
Whenever i am trying to remove unused css with wprocket.
it is saying – We are processing the CSS on your site. This may take several minutes to complete.
and its stuck there loading.
Awaiting your reply.
Thanks

[Eric]

Sorry, I only gave a segment of the url. Bad copy/paste.

https://emmassexstore.com/wp-content/plugins/gp-premium/(.*).css

Add this to your list of exclusions (with your domain instead of mine) and it should exclude all GP css files from being removed. That was my experience at least, not sure if it will work for you.

[Elvin]

Hi Abhishek,

I believe Eric used WP Rocket’s CSS safe list text field to add /wp-content/plugins/gp-premium/(.*).

If it’s not working on your end you may have to ask WP Rocket’s support for this.

[Edit]

@Eric Thanks for sharing! 😀

[Tim]

I also experience this issue where the hamburger menu won’t work properly when having Remove Unused CSS activated. I only experience issues with this on mobile.

I have tried adding both /wp-content/plugins/gp-premium/(.*) and /wp-content/plugins/gp-premium/(.*).css to the exclusion list without it doing any difference.

EDIT: I also tried adding this as an exclusion: /wp-content/themes/generatepress/assets/css/(.*).css

Does anyone have anything to add to this thread maybe? 🙂

Enabling this option boosts my mobile pagescore from 38 to 68 and the only issue is with the mobile hamburger menu so Id really like to have it on!

[David]

Hi there,

try excluding the main.min.css file.

But as Elvin suggested you may find WP Rockets support more able to assist, they know the GP Theme very well 🙂

[Tim]

Already did that in the catch-all, but tried now adding it seperately as well, with no luck.

Also tried with the full path using https://domain.tld/

I guess I’ll check with their support team.

[Author]

Posts