Users are seeking to make the header transparent in Shopify’s Dawn theme, with several technical challenges emerging.
Primary Solution:
base.css file targeting the header element with background: transparent !important; and position: absolute;Common Issues Reported:
Additional Requests:
Video tutorials were shared as alternative solutions.
here you can see the new dawn theme with the updated version but there is no transparent header.
I want the header transparent like this
but i can’t find the code so maybe someone has me a code for this. I chossed sticky header so when i scroll down the header goes down and white
pw: djerba
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 base.css
Step 3: Paste the below code at bottom of the file → Save
header.header.header–top-center.header–mobile-center.page-width.header–has-menu {
background: transparent !important;
position: absolute;
width: 100%;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
that works but when i want to change the size of the safari window the header is still on the same position so its not in the center
Hello @le_X_Atelier ,
You can follow these steps:
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
You can try again this code:
header.header.header--top-center.header--mobile-center.page-width.header--has-menu {
background: transparent!important;
position: absolute;
width: 100%;
max-width: 100%;
}
that works but the last point is so when i scroll down the page the header comes with me but is still transparent but i want it with a white background then so like this:
Hey, do you have dicsord by any chance? i am trying to have my header when people land on my page be transparent along with icons be white, once hovered over the header with the mouse cursor, the header turns white and icons turn black, then if you hover off the header with your mouse, it turns transparent again along with the icons like menu and search icon turn white again. Willing to pay, i left an example right beside this. VIDEO HERE!
My discord Official Prey#0001
Hi Gempages.
This works great for me, but is it possible to have it work only on the home page?
Thanks
I have a question I used this code on dawn theme and it worked but there is an issue when i scroll down ( I have a sticky header ) and when I do that the shopping bag, search ect,you cant see it because its white but i need it to be white for the transparent part and i need it to be black when scrolling down
Hi, thank you for this code! It works really well. I only have one problem thoæugh. The white header background (after scrolling down) s not in full width? I try changing the width but no luck. Any tips would be helpful.
Thanks for this code, it works great. I am running into some issues with the new Dawn V.15.1…
When I hover over the Header the whole section changes to a solid white.
Q: Can the header permanently be transparent?
Also, when I navigate to a collections or Product page, I am noticing that my product info is now at the top of the page behind the Header.
Q: Can the product or collection description be aligned so the header stays above the Product description?
You can add transparent header in your Dawn theme:
You can try this solution for transparent header:
