A user modified their Craft theme menu drawer to 70% width but lost visual separation from the underlying content. They requested a blur and dark tint effect on the background when the menu opens.
Solutions provided:
CSS approach for mobile drawer menus: Add code to Theme Settings → Custom CSS targeting body[class*=overflow-hidden] main with blur and brightness filters
JavaScript solution: Insert code in theme.liquid file (above </body> tag) that adds/removes a CSS class when the menu opens/closes
Desktop hoverable menu fix: Use :has() selector targeting body:has(header [open]) to apply blur effects to main and footer elements
Implementation workaround:
When Custom CSS won’t save the code, add a “Custom liquid” section in the Footer section group (via Customizer, not code editor) and wrap the CSS in <style> tags.
The original poster confirmed one solution worked. A follow-up user with a hoverable menu encountered saving issues, which were addressed through the Custom liquid workaround method.
Hi there,
Defaultly the menu drawer of my craft theme was of full width but I changed it to only 70%.
Now when the menu is opened there is no visible seperation between the menu and the underlying content which is not suitable for the website. So I need the underlying content to be blurry and a slightly black tinted when the menu is open.
Website - https://www.valcoure.store/
password - kothavara
Someone please help me with this.
Thank You.
This code should go to “Theme settings” => “Custom CSS”
body[class*=overflow-hidden] main {
filter: blur(2px) brightness(0.75);
}
Hey @AnSrSi
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank You So much
Thank You So much
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Hi, sadly didn´t work for me. I have the hoverable menu code, could that be why it doesn´t work? (www.tsukiyo.de)
The code would work for drawer menu on mobile. Your drawer is full-bleed and covers entire window/screen, so you can’t see the effect.
If you want to blur the page on desktop, the code should be like this:
body:has(header [open]) main,
body:has(header [open]) footer {
filter: blur(2px) brightness(0.75);
}
thanks for the reply, but i somehow can´t save it when i´m inserting it in custom css.
Yes, this can be picky. There is a workaround – add a “Custom liquid” section in Footer section group and paste the code wrapped with … there:
thank you, but here exactly? Code → New custom liquid, but to which asset?
Nope, in Customize.
so custom CSS in theme settings?
