Make underlying content of menu drawer blurry and slightly black shaded

[AnSrSi]

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.

[tim · Accepted solution]

This code should go to "Theme settings" => "Custom CSS"

body[class*=overflow-hidden] main {
  filter: blur(2px) brightness(0.75);
}

[AnSrSi]

Thank You So much

[Moeed]

Hey @AnSrSi 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
body[class*=overflow-hidden] main {
    filter: blur(4px) brightness(0.75) !important;
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AnSrSi]

Thank You So much

[Moeed]

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.

[tsukiyo]

Hi, sadly didn´t work for me. I have the hoverable menu code, could that be why it doesn´t work? (www.tsukiyo.de)

[tim]

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);
}

[tsukiyo]

thanks for the reply, but i somehow can´t save it when i´m inserting it in custom css. 

[tim]

Yes, this can be picky. There is a workaround -- add a "Custom liquid" section in Footer section group and paste the code wrapped with <style> ... </style> there:

<style>
 body:has(header [open]) main,
 body:has(header [open]) footer {
  filter: blur(2px) brightness(0.75);
 }
</style>

[tsukiyo]

thank you, but here exactly? Code -> New custom liquid, but to which asset?

[tim]

Nope, in Customize.

[tsukiyo]

so custom CSS in theme settings?

[tim]

Nope. In Customizer, add a "Custom liquid" section in a "Footer" section group.

paste code above into "Code" setting of this new section.