Hello, there is a drop-down menu at the top left on the website I gave the preview link below. I want the background to be transparent when this menu is opened. Can anyone help me find the CSS code specific to this?
Topic summary
A user seeks help making a dropdown menu background transparent on their Shopify store. The menu appears in the top-left corner of their site.
Proposed Solutions:
- One suggestion involves adding semi-transparent background color using CSS variables:
background-color: rgb(var(--background-color), 0.); - Another recommends targeting
.header__icon[aria-expanded='true']::beforewithbackground: transparent;in the main CSS file - A screenshot was shared showing where to locate the relevant CSS class in the base.css file
Current Status:
The issue remains unresolved. The original poster tried multiple approaches, including adding the suggested CSS code in various locations within the section mentioned, but none of the solutions worked successfully. They’re unable to locate some of the specific CSS classes referenced (like .menu-reward-u).
You can make it half-transparent.
Find your css file, and add to the class .menu-drawer this:
background-color: rgb(var(--color-background), .0);
Add this CSS at the bottom of your main CSS file
.header__icon--menu[aria-expanded='true']::before{ background: transparent;}
I can’t find .menu-drawer class
Where should I add it?
Thank you very much for your help, but unfortunately it didn’t work. I hope I’m not doing it wrong. I found the section you mentioned and added it in every way that could be added, but it didn’t work.