How to make header transparent in Dawn theme?!

[Perziamalayeri]

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 

[KetanKumar · Accepted solution]

@Perziamalayeri 

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.

[PageFly-Victor]

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 </head> tag:

{% if template.name == 'index' %}
<style>
.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;
}

</style>
{% endif %}

Best Regards;

PageFly

[Perziamalayeri]

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 

[Dabylo]

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

[AvadaCommerce]

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.

[Perziamalayeri]

Thankyou, but sadly there is no option for this in the "Dawn" theme. 

[KetanKumar · Accepted solution]

@Perziamalayeri 

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.

[Perziamalayeri]

Thanks Ketan!

https://perziamalayeri.myshopify.com

Password: Perzia 

[Perziamalayeri]

Password: Perzia 

[Perziamalayeri]

Hello, I accidentally pressed "accept as solution" But it's not solved yet. Please help me!

[Cedcommerce · Accepted solution]

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:

• Go to your Shopify admin > Sale channels > Online store
• Themes > Select your dawn theme > Click on Actions > Edit code
• In your Sections folder open the header.liquid file.
• Paste the below-provided code before on the very first line of code in this file and save the changes.

<style>

.header-wrapper{

background: none;

border: none;

}

</style>

Check the result on the desktop:

image.png

Check the result on a smartphone:

image.png

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

[Perziamalayeri]

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

[Sohir]

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 🙂

[Echonova]

I am also having the same issue after trying the code.

[KetanKumar]

@Echonova 

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.

[sanam19]

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! 

[ivonnebot]

<style>
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  border: none;
  z-index: 999;
}
</style>

[Dabylo]

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

[ivonnebot]

I got it 

<style> .header-wrapper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; border: none; z-index: 999; } </style>

[meridithshook3]

Hello, I am dealing with the same issue, with the code above can you specify where to place it? Thanks!

[ivonnebot]

CSS of Header 

[sfoster95]

Just to clarify since I am new you mean in the custom css for header like in this photo?

[MellowSigns]

Nope! In the customize -> edit code -> sections -> header something something. I think there's a description of where you should paste the code above. If not, every other thing you want to change envolves changing code in these files, you'll figure it out shortly!

[ivonnebot]

Yes! 😊

[KetanKumar]

@meridithshook3 

can you please share store url so i will check and let you know 

[shortcomings]

Thank you, that worked for the header! Is there any way to do this with the footer? I tried swapping the "header-wrapper" for "footer-wrapper" in the code you provided to no avail.

[ebpSloth]

This was quite helpful, although when I do this as per your instructions I find that with the Dawn theme I am stuck with a sticky header even when turned off. Do you know why?

[websensepro]

Try this tutorial 

[debbieps]

Hello Websensepro,

Thank you for the amazing tutorial.

I have managed to get my header transparent by following this video.

Is it possible to also make the Slide Bar (below the Header Hero Photo) transparent? (Photo attached)

Thank you!

[guiguimorning]

hello , do you have a solution please for the mobile version colour icon and text , 
i followed your videos for transparent header and logo , it worked very well on desktop, but in mobile version the colour switch to black automatically

[Zee908]

it works!! omg thankyou!

[MRamzan]

You can add transparent header:

[SoulGrip]

Hello 🙂 

I know you posted this quite some time ago, but I noticed your website now does the exact thing you were asking for and I really want mine to do the same. Would you mind sharing the code you used?

Thank you!

[najamalishahid]

Hi , 

Just paste below code in you theme.liquid file if you just want your home header with transparent background 

{% if template.name == 'index' %}
<style>
.header-wrapper{
background: none !important;
border: none;
margin-bottom: -95px;
}

</style>
{% endif %}

if you want tranparent header on whole site remove the condition. thanks 

[KetanKumar]

@najamalishahid oh sorry for that issue can you please share your store url so i will check and update you,