How can I make my Dawn theme header and menu transparent?

[spacetimerider]

My site: etherealoasis.co

My theme: Dawn

I recently added an animated background for the site, but there are a few containers that are still showing a black background. I need header to be transparent and the drop-down menus when you’re viewing on a desktop to be transparent as well.

Also, on the main page, there are a few containers that have black backgrounds that I would like to change to transparent as well.

Thanks in advance for any help!

[GemPages]

Hi @spacetimerider
I would like to give you a solution.

1. Go to Online Store → Theme → Edit code. https://prnt.sc/js2u9lX4TESb

2. Open your base.css in the Assets folder.

3. Paste the below code at the end of the file.

#shopify-section-sections--18217071182125__header sticky-header.header-wrapper {
  background: rgba(0,0,0,0);
  transition: background 0.2s;
}
#shopify-section-sections--18217071182125__header.shopify-section-header-sticky sticky-header.header-wrapper {
  background: rgb(0,0,0);
}

Best regards,
GemPages Support Team

[spacetimerider]

Thank you! That fixed the background of the header, but the menu navigation is still showing a black background when it drops down.

[GemPages]

@spacetimerider

If you want to make transparent background for the header when it drops down, then you can remove this code in the above code.

But this will make the menu very difficult to see.

Best regards,
GemPages Support Team

[irene-vintage]

Hello @spacetimerider ,

You can try to follow these steps:

• Go to Online Store → Themes → Actions → Edit Code

• Go to Assets folder → Base.css → Add the following code at the bottom of the page:

#shopify-section-sections--18217071182125__header sticky-header.header-wrapper {
  background: rgba(0,0,0,0);
  transition: background 0.2s;
}
#shopify-section-sections--18217071182125__header.shopify-section-header-sticky sticky-header.header-wrapper {
  background: rgb(0,0,0);
}

• Save and preview.

Hope this can help. Let us know if you have any further questions.

Regards,

Ali Reviews team.

[spacetimerider]

Sorry for the confusion. I like the way it works when you scroll down and the menu stays w/ the black background. I’m referring to the actual dropdown menu (the navigation itself)…like when you click “Accessories” and the black box appears underneath it while the top is still transparent.

[GemPages]

Hi @spacetimerider

Do you want a transparent background for dropdown menu? It will look like the image below.

Or they can make the header go back to black background when hovering over it.

I will gladly help you.

Best regards,
GemPages Support Team

[spacetimerider]

Thank you! I was going to play with the color and add some drop shadow or glow to make the menus stand out more… but I believe it may look better if we can make the header turn black when the menu is clicked. So, I’d like to try that.

[spacetimerider]

Any suggestions on how to make the header turn black when the navigation is clicked on?