Exclude Generatepress Off Canvas CSS
-
I have tried everything I know, but cannot seem to exclude the Mobile Off Canvas Menu from Generatepress. I think I have located the request url and I have added this to your CSS Excludes field, but it does not exclude it.
/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css?ver=2.3.1
If you look at the Off Canvas Mobile Menu on some mobile devices, such as Samsung Galaxy S20, the Slide Out Menu is blank. If I turn of CSS Caching, the menu works. This is why I am trying to exclude the mobile menu, but nothing I try seems to exclude it from caching. Any ideas please?
The page I need help with: [log in to see the link]
-
Sorry to have to add this. I have tried find some clues from your documentation, but it falls short where we come to the Tuning CSS Tab. The instructions are vague at best.
I have the CSS Selectors, but cannot add them anywhere.
mobile.min.css
main.min.cssMost frustrating is that you have a field called ‘UCSS Selector Allowlist’ but no field to exclude a selector. How do I exclude a selector?
So I added these URL’s and still Litespeed won’t exclude the Off Canvas Menu.
/wp-content/themes/generatepress/assets/css/mobile.min.css
/wp-content/themes/generatepress/assets/css/main.min.css
How do I exclude it from CSS Caching?
Here is a link with a screenshot of my Tuning Settings – CSS
Hi,
It’s a common problem. I’d recommend you follow this comprehensive TS guide, https://docs.litespeedtech.com/lscache/lscwp/ts-optimize/ to exclude certain CSS files.
Basically you can try to exclude all CSS files, and then remove it from the Exclude field one by one until you locate the specific CSS that breaks the menu.
Hi,
I have tried this and added all the CSS URL’s to Exclude CSS and the issue persists. Again, if I disable Minify CSS in Litespeed, the issue if fixed, but all the exclusions I am adding, do not exclude the Mobile Menu.
The problem with this resolution is that developer tools does not allow me to list the CSS when I select the Mobile menu. I can only seem to grab the css on the page, but when I am recording the network data and try to click the mobile menu, I get no responses?
How do I get the developer tools to show me the CSS generated when I open the mobile menu?
Here is the list of CSS I have excluded, which doesn’t work;
/wp-content/plugins/lightweight-social-icons/css/style-min.css?ver=1.1
/wp-includes/css/dashicons.min.css?ver=6.2
/wp-includes/css/admin-bar.min.css?ver=6.2
https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic|Muli:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,800,800italic,900,900italic|Source+Sans+Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic
/wp-includes/css/dist/block-library/style.min.css?ver=6.2
/wp-content/plugins/woo-gutenberg-products-block/build/wc-blocks-vendors-style.css?ver=10.1.0
/wp-content/plugins/woo-gutenberg-products-block/build/wc-blocks-style.css?ver=10.1.0
/wp-includes/css/classic-themes.min.css?ver=6.2
/wp-content/plugins/official-sendle-shipping-method/style.css?ver=6.2
/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=7.7.0
/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=7.7.0
/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=7.7.0
/wp-content/plugins/wordfence/css/wordfenceBox.1679934025.css?ver=7.9.2
/wp-content/plugins/woocommerce-brands/assets/css/style.css?ver=1.6.49
/wp-content/plugins/duplicate-post/css/duplicate-post.css?ver=4.5
/wp-content/plugins/imagify/assets/css/admin-bar.min.css?ver=2.1.1
/wp-content/plugins/seo-by-rank-math/includes/modules/analytics/assets/css/admin-bar.css?ver=1.0.114
/wp-content/plugins/woocommerce-variation-swatches-and-photos/assets/css/swatches-and-photos.css?ver=3.0.6
/wp-content/plugins/zipmoney-payments-woocommerce/assets/css/woocommerce-zipmoney-payment-front.css?ver=1.2
/wp-content/plugins/seo-by-rank-math-pro/includes/modules/analytics/assets/css/admin-bar.css?ver=3.0.35
/wp-content/plugins/ajax-search-for-woocommerce/assets/css/style.min.css?ver=1.23.0
/wp-content/plugins/seo-by-rank-math/assets/front/css/rank-math.css?ver=1.0.114
/wp-content/themes/generatepress/assets/css/all.min.css?ver=3.3.0
/wp-content/themes/generatepress-child/style.css?ver=1678931597
/wp-content/plugins/litespeed-cache/assets/css/litespeed.css?ver=5.4
/wp-content/uploads/generateblocks/style-192285.css?ver=1683021773
/wp-content/plugins/gp-premium/menu-plus/functions/css/sticky.min.css?ver=2.3.1
/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css?ver=2.3.1
/wp-content/plugins/gp-premium/menu-plus/functions/css/navigation-branding.min.css?ver=2.3.1
/wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce.min.css?ver=2.3.1
/wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css?ver=2.3.1
https://static.chatra.io/jscss/0f4b36301fb51872f1b179a76dbf2e28b4b4a818.css?meteor_css_resource=true
https://www.gstatic.com/recaptcha/releases/1h-hbVSJRMOQsmO_2qL9cO0z/styles__ltr.cssOK, so I have found a work around (not a solution). It’s a very simple workaround, but there are repercussions. I will need to check for any breakages over the next few days, but my Mobile Page Speed has taken a significant hit by implementing this.
Anyway, by activating the CSS Combine, the issue appears to be resolved. Not quite sure how this fixed it, but it has. My issue now, is that the Mobile is speed is unsatisfactory and there may be potential breakages I am yet to discover.
So while I have a fix visually, my mobile caching is poor. Identifying the CSS for the menu and excluding it, is still the best option if you can help with that please.
OK, so the actual fix is to exclude this CSS in the CSS Excludes’ field.
/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css
Now I know this is pretty obvious and don’t think I hadn’t tried this a million times over the past few days. However what I was also pasting in was the ‘?ver=2.3.1’ at the end of the url, so my url looked like this;
/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css?ver=2.3.1
That version number at the end, messes everything up and prevents Litespeed from excluding it.
I hope this thread helps someone else avoid this mistake in future.
All good, thanks
The topic ‘Exclude Generatepress Off Canvas CSS’ is closed to new replies.