What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Transparent Menu

How can I make a dropdown menu background transparent with CSS?

hefoli
Tourist
14 0 2

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?

 

https://ujpt9cyruh3i95w0-85574287682.shopifypreview.com

Replies 6 (6)

kgbfashionista
Navigator
345 24 48

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

 

 

Feel free to like my post if it was helpful at all
hefoli
Tourist
14 0 2

I can't find .menu-drawer class

anupam1607
Shopify Partner
53 10 10

Add this CSS at the bottom of your main CSS file

.header__icon--menu[aria-expanded='true']::before{ background: transparent;}
Buy me a coffee.
- Was your question answered? Mark it as an Accepted Solution. ❤️
- Don't forget to give me Thumbs Up.
- Store, Product and Collection Modifications | Apps and Sales Channel | Animation
- Lets connect anupammistry1607@gmail.com 
hefoli
Tourist
14 0 2

Where should I add it?

anupam1607
Shopify Partner
53 10 10

Screenshot_2.png

In base.css file you'll fond the above class with CSS

Buy me a coffee.
- Was your question answered? Mark it as an Accepted Solution. ❤️
- Don't forget to give me Thumbs Up.
- Store, Product and Collection Modifications | Apps and Sales Channel | Animation
- Lets connect anupammistry1607@gmail.com 
hefoli
Tourist
14 0 2

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.