How do I change the opacity of drop menu for dawn theme

Store Design

Topic summary

A user seeks to make the dropdown menu background more translucent (rather than solid white) on the Dawn 0.5 theme.

Multiple solutions provided:

All responses recommend adding CSS code to the base.css file via Online Store → Theme → Edit code → Assets → base.css:

  • GemPages: Suggests targeting #HeaderMenu-MenuList1 with background: rgb(255,255,255,.7);
  • Denishamakwana: Recommends .header__submenu ul with opacity: 0.8 !important;
  • Litos: Proposes .header__submenu with background: #ffffff7f !important; (also mentions customizing color)
  • PageFly-Victor: Advises targeting .header__submenu.list-menu.list-menu--disclosure with background-color: rgba(255,255,255,.5) !important; and searching for the component-list-menu.css file

Key differences:

The solutions vary in CSS selectors and opacity/transparency values (0.5-0.8 range), offering different approaches to achieve the translucent effect.

Status: Multiple viable solutions provided; awaiting user confirmation on which approach works best.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am looking for a solution to be able to make my drop menu background more of a translucent than sold white. I am on Dawn 5.0

www.xeautosport.com

2

Hello @XEautosport

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your base.css file and paste the following code below:
#HeaderMenu-MenuList-1{
  background: rgb(255,255,255,.7);
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

Please add below css code in bottom of assets/base.css file

ul.header__submenu {
opacity: 0.8 !important;

}
Thank you.

4

Hi @XEautosport ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.header__submenu {
      background: #fffffff7 !important;
}

you can also change the color code to your liking, it will display well

5

Hi @XEautosport,

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-list-menu.css.

Step 3: Paste the below code at bottom of the file → Save

.header__submenu.list-menu.list-menu–disclosure{

background-color:rgba(255,255,255,.5) !important

}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly