Is it possible to lower opacity for my mega-menu background?

[teemania]

Hello, I’m working on my Shopify website & I think it would look a lot better if the mega-menu background was somewhat see through. How do I go about adjusting the opacity for my mega-menu? Thanks!

My website: https://teemania.co/

[David_SHT]

Hi @teemania ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.mega-menu__content {
 background: rgb(var(--color-background), 0.9)!important
}

You can adjust the opacity by replacing the value 0.9 with the desired value.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[Dan-From-Ryviu]

Hi @teemania

You can do that by adding this CSS code at the bottom of your base.css file

.mega-menu[open] .mega-menu__content {
opacity: 0.8 !important;
}

[ZenoPageBuilder]

Currently I can see the mega menu is somewhat transparent already. Looks like you have figured it out.