Technical Issue: Mobile Menu breaks when LiteSpeed “UCSS” is enabled
- This topic has 1 reply, 2 voices, and was last updated 2 days ago by
.
-
Posts
-
Hello WoodMart Support Team,
I am writing to request technical assistance regarding a conflict between the WoodMart Mobile Menu (Off-canvas sidebar) and the LiteSpeed Cache (LSCWP) UCSS feature (Unique CSS / CSS Critical Path).
The Environment:
Theme: WoodMart (Latest Version)
Server: OpenLiteSpeed (running on a dedicated high-performance server)
Plugin: LiteSpeed Cache (latest version)
The Problem: We are optimizing the site for Core Web Vitals. We have successfully configured “JS Deferred” (the menu trigger works perfectly). However, when we enable “Generate UCSS” in LiteSpeed, the Mobile Menu styles are stripped out. When clicking the hamburger icon, the overlay appears, but the side navigation drawer is either invisible or completely unstyled (broken layout).
Our Diagnosis: It appears that because the WoodMart mobile menu is initially hidden (display: none) or dynamically injected into the DOM, the UCSS crawler assumes the CSS is “unused” and removes it from the critical CSS generation.
Troubleshooting Steps Already Taken (We tried everything):
Isolated the variable: We confirmed that disabling UCSS immediately fixes the issue.
JS Exclusions: We have already excluded all relevant scripts from JS Delay (mobileNavigation, woodmart-theme, wd-header-mobile-nav, swiper, etc.). The JS execution is working fine; the issue is strictly CSS-related.
Theme Performance Settings:
We disabled “Mobile menu DOM optimization” (set to “Always load”).
In Theme Settings > Performance > CSS > Styles always load, we checked: “Mobile menu”, “Header”, “Mobile search”, “Off canvas sidebar”, and “Header base”.
UCSS Whitelisting: We attempted to whitelist nearly every selector associated with the mobile menu in LSCWP settings, including but not limited to:
.whb-header, .wd-side-hidden, .wd-opened, .wd-nav-mobile, .mobile-nav-wrap, .wd-tools-element, .woodmart-mobile-menu, body.wd-mobile-menu-open.
The Request:
Despite these efforts, UCSS continues to break the mobile menu structure.
Could you please provide:
A list of specific CSS Selectors or Class Names that we must add to the UCSS Whitelist to protect the Mobile Menu sidebar?
Or, is there a specific File URI for the mobile menu styles that we should exclude from CSS Combination/UCSS entirely?
We really want to keep UCSS enabled for the significant FCP/LCP performance boost it provides.
Thank you for your help.
