Hello, I’ve a question, how can I overlap the banner into the default Dawn header, and also make the header transparent? I leave an image to demonstrate.
Thank you!
Topic summary
A user seeks to make the Dawn theme header transparent and overlap with a banner image on their Shopify store.
Initial Solution:
- Custom CSS code was provided to be added above
</body>intheme.liquid - First attempt caused visibility issues (black text on black background)
Refinements Made:
- Code was adjusted to work when sticky header option is set to “NONE”
- Fixed centering issues and removed unwanted white line at top
- Solution successfully implemented for transparent header with overlapping banner
Additional Customization:
- User requested transparent header only on landing page, with colored header on other pages (cart, product pages)
- Conditional code using
{% if template.name == "index" %}was provided to achieve page-specific styling
Current Status:
- Original issue resolved
- New question raised about activating/showing header on a specific page where it’s currently hidden
- Separate user inquired about white logo/menu text on transparent header that changes to black on scroll, plus product image positioning
1 Like
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file theme.liquid.
Step 3. Add this code above
Hello @julianamachado
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
Hello! I think it worked in part, however the logos disappeared, everything became invisible
@julianamachado , can you kindly share your store url? I will check it for you 
It was my mistake regarding this, the text was black and the background was also black so it was not possible to see it.
But I have another problem, the code you offered me does not work if the stick header option is NONE, it only works with the other options. In the none option the banner remains the same.
I apologize but the website contains some information that should not be published.
1 Like
@julianamachado , Change it like this
The part I was looking for worked but it caused 2 other problems, it is off-center and has a white line at the top of the header.
try this one again
1 Like
Perfect, thank you soo much!!
1 Like
@julianamachado , glad to hear that 
Hello, could you help me again? I would like to keep the header transparent on the landing page as it is now, but it would be possible to leave it with color on other pages (cart, product page).
Thank you!
@julianamachado , you want it’s transparent on homepage but with color in other page?
Use this code
{% if template.name == "index" %}
{% endif %}
1 Like
It worked thank you! I don’t have the header ‘‘activated’’ on a page, can you tell me how can I do it (activate)?
Hello, I followed the above instructions to create the same aesthetic, having the header be transparent, however I’d like to have the logo and menu font be white whilst it’s transparent and when it scrolls down, it changes from transparent to solid white white with black font. Also, on the product page, can you have the product images bleed to the left edge of screen and also the top? The product info will need to offset to be lower than the header. I’ve tried to offset it in the settings, however it offsets both the image and the info. Thanks