A Shopify beginner using the Dawn theme seeks to create a transparent header so their logo appears over the homepage background image, similar to examples they’ve seen on other sites.
Initial Solutions Attempted:
Core Problem:
While several code solutions successfully made the header transparent, users consistently encountered a secondary issue: the background image wouldn’t extend behind the header, leaving a white bar at the top instead of the image showing through.
Working Solutions Shared:
.header-wrapper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; border: none; z-index: 999; }{% if template.name == 'index' %} wrapper and margin-bottom: -95px to pull content upOngoing Issues:
Multiple users report success with the fixed positioning approach, though mobile responsiveness remains a challenge for some.
Hi!
I’m new to shopify and trying to build my first e-commerce website.
I have no experience with coding at all.
I just want to make my header transparent so that I can get my logo on top of the background image of my homepage. I’m using the Dawn theme!
Please send help 
Thankyou
Perzia
Hi @Perziamalayeri !
This is PageFly - Advanced Page Builder. I would love to give you some recommendation
---->In your theme.liquid file in your layouts folder
---->Add this style code and condition right after the closing tag:
{% if template.name == ‘index’ %}
.header-wrapper { position: fixed; top: 0; width: 100%; } .header__menu-item, .header__active-menu-item, .header__icon .icon { color:#fff } .header__menu-item:hover{ color:#fff; }{% endif %}
Best Regards;
PageFly
Thanks for your reply and help!
I’ve tried it but it’s not yet what I want. See images of what happened to the header. I’ve also added an example of what I’m aiming for (an example from Triangle.com).
Thanks a lot!
Perzia
Hi @Perziamalayeri ,
You can check it here:
Please go on your Online Stores> Customize Themes:
On advanced settings ,
In the Header settings, click on Enable transparent header.
Then click save it.
I hope this helps.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thankyou, but sadly there is no option for this in the “Dawn” theme.
Password: Perzia
Hello, I accidentally pressed “accept as solution” But it’s not solved yet. Please help me!
Hello @Perziamalayeri ,
First of all many Congratulations on choosing Shopify as your preferred eCommerce platform.
Shopify offers the best community to its retailers and merchants to get their problems resolved quickly and easily.
Where there is Shopify there will be Experts like us, to help you with any problem, therefore making your Shopify journey hassle-free and smooth.
You can fix this issue with the help of a custom code, you need to follow these steps:
Check the result on the desktop:
Check the result on a smartphone:
The above solution will help you fix it for sure.
Note: You are only advised to perform this if you are experienced with liquid code, else please hire a Shopify expert who can help you with this issue or connect with us for the same.
All the best,
CedCommerce
Hi! Thank you so much. It worked. I notice it is transparent when I scroll down.
Although, is it now possible to get the background image at the top instead of the white header bar? So that I see my image underneath the transparent header! (See example images before and after scroll).
Hi, I also reached the same outcome as you but struggling to get the image to be underneath the header rather than the white bar. I am also using Dawn theme
I am also having the same issue after trying the code.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi! Is there the above requested code to get the background image at the top instead of the white header bar? I saw that it was requested, but was unable to see any code responses.
Thanks!
Hello. Please help me. How did you achieve the desired result? On the PC version, I managed to do it. But there is no phone ((( Please help me
Hello. Please help me. How did you achieve the desired result? On the PC version, I managed to do it. But there is no phone ((( Please help me
I got it
.header-wrapper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; border: none; z-index: 999; }
Hello, I am dealing with the same issue, with the code above can you specify where to place it? Thanks!