How to do transparent or blur and put pictures on drawer menu like these website?
Topic summary
A user seeks to create a transparent or blurred drawer menu with background images, similar to reference examples shown in screenshots.
Solutions Provided:
- Dan-From-Ryviu offered CSS code to add before the
</head>tag intheme.liquid, creating transparency and blur effects - Moeed suggested alternative code placement above the
</body>tag - websensepro recommended adding CSS to
base.csstargeting.menu-drawerwithbackground-color: rgb(var(--color-background), 0.6)
Follow-up Requests:
The original poster requested:
- Black transparency matching the header (not yellow background)
- Removal of barely visible lines in the menu
- Extending the drawer menu to cover the header area
- Matching blur levels between menu and header
Dan-From-Ryviu provided updated CSS code snippets for each refinement, successfully resolving the issues.
Current Status:
A new participant (NVRNML) joined asking how to add blur effects to their mobile menu at nvrnml.com, with Dan-From-Ryviu requesting their store link to assist. The discussion remains active with ongoing customization requests.
Hey @LG999
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
Thanks for your help
Hi @LG999
Go to your Online store > Themes > Edit code > open theme.liquid file, add this before tag
1 Like
Hey @LG999
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 help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hi, @LG999 .
-
Go to Online Store
-
Edit Code
-
Find base.css file
-
Add the following code in the bottom of the file.
.menu-drawer {
background-color: rgb(var(--color-background), 0.6) !important;
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
1 Like
Can it be black transparant same as header?
Not following background yellow
Deeply appreciate
Deeply appreciate your help!
How to remove 3 lines that I can see barely in this picture?
Deeply appreciate your help!
How to remove 3 lines that I can see barely in this picture?
Please update code like this
1 Like
Could you explain a little more about your request?
1 Like
Is already remove.
1 Like
Hi @LG999
It look weird if drawer menu covers this header. You can update code to this to make it look like this
Totally worked!!
Deeply appreciate.
What if I want this menu and header to be blur at same level?
Sorry for asking a lot but it’d be much appreciate.
Like exactly same as this page
Hi, you can do that by updating the code to this.
1 Like
Hi. This worked for me but is there a way to make it blur?
1 Like
Hi @NVRNML
Please share your store link
nvrnml.com (nvrnml for password)
I want the mobile menu to blur what’s behind it - not sure if that’s possible?