Dawn Theme - Transparent Header & Menu

spacetimerider
Explorer
49 2 5

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!

Replies 8 (8)
GemPages
Shopify Partner
5586 1259 1116

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
spacetimerider
Explorer
49 2 5

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

GemPages
Shopify Partner
5586 1259 1116

@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.

GemPages_0-1679452038465.png

 

But this will make the menu very difficult to see.

GemPages_1-1679452121745.png

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
spacetimerider
Explorer
49 2 5

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
Shopify Partner
5586 1259 1116

Hi @spacetimerider 

 

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

GemPages_0-1679455829052.png

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
spacetimerider
Explorer
49 2 5

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
Explorer
49 2 5

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

AliReviews
Shopify Partner
755 85 341

Hello @spacetimerider ,

 

You can try to follow these steps:

  • Go to Online Store -> Themes -> Actions -> Edit Code 

Ref- step 1.png

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

Screen Shot 2023-03-22 at 09.36.59.png

 

  • Save and preview.

 

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

 

Regards,

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- AliReviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!