Goal: Over an animated background in the Dawn theme, make the header and desktop dropdown navigation transparent; also remove remaining black backgrounds on the home page.
Actions taken: Helpers provided Base.css rules to set the header transparent and restore a black background in the sticky (scrolled) state. This fixed the header background but not the dropdown panel, which still appeared with a black background.
Options discussed: Removing the sticky black background rule would make the dropdown area transparent, but could reduce menu readability. Another reply reiterated the same Base.css approach for transparent header + black sticky state.
Clarification: The requester wants the header to stay transparent by default, remain black when sticky on scroll, and also turn black specifically when a navigation dropdown is opened/clicked to improve visibility.
Status: The user asked for concrete steps/code to make the header turn black upon menu click/open; no final solution has been provided yet. Screenshots were shared to illustrate the visibility trade-offs with transparent menus.
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!
Hi @spacetimerider
I would like to give you a solution.
Go to Online Store → Theme → Edit code. https://prnt.sc/js2u9lX4TESb
Open your base.css in the Assets folder.
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
Thank you! That fixed the background of the header, but the menu navigation is still showing a black background when it drops down.
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
Hello @spacetimerider ,
You can try to follow these steps:
#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);
}
Hope this can help. Let us know if you have any further questions.
Regards,
Ali Reviews team.
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.
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
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.
Any suggestions on how to make the header turn black when the navigation is clicked on?
