Solved

How to make header transparent in Dawn theme?!

Perziamalayeri
Excursionist
54 0 10

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 

Accepted Solutions (2)

KetanKumar
Shopify Partner
36904 3640 11985

This is an 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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Cedcommerce
Shopify Expert
718 76 113

This is an 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:

Cedcommerce_0-1663931465734.png

 

image.png



Check the result on a smartphone:

Cedcommerce_1-1663931465686.png

 

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 30 (30)

PageFly-Victor
Shopify Partner
7865 1785 3072

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
Excursionist
54 0 10

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
New Member
4 0 0

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
Shopify Partner
3879 839 968

Hi @Perziamalayeri ,

 

You can check it here: 

 

Please go on your Online Stores> Customize Themes: 

AvadaCommerce_0-1663891536418.png

AvadaCommerce_1-1663891548059.png

On advanced settings , 

In the Header settings, click on Enable transparent header.

AvadaCommerce_2-1663891634994.png

 

 

Then click save it. 

 

I hope this helps.

 

banned
Perziamalayeri
Excursionist
54 0 10

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

 

 

KetanKumar
Shopify Partner
36904 3640 11985

This is an 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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Perziamalayeri
Excursionist
54 0 10

Thanks Ketan!

https://perziamalayeri.myshopify.com

Password: Perzia 

 

 

Perziamalayeri
Excursionist
54 0 10

Password: Perzia 

Perziamalayeri
Excursionist
54 0 10

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

Cedcommerce
Shopify Expert
718 76 113

This is an 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:

Cedcommerce_0-1663931465734.png

 

image.png



Check the result on a smartphone:

Cedcommerce_1-1663931465686.png

 

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
Perziamalayeri
Excursionist
54 0 10

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
Visitor
1 0 0

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
Visitor
1 0 1

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

KetanKumar
Shopify Partner
36904 3640 11985

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sanam19
Visitor
1 0 0

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
Shopify Partner
6 0 5
<style>
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  border: none;
  z-index: 999;
}
</style>
Dabylo
New Member
4 0 0

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
Shopify Partner
6 0 5

I got it 

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

meridithshook3
Visitor
2 0 2

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

ivonnebot
Shopify Partner
6 0 5

CSS of Header 

sfoster95
Shopify Partner
56 3 12

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

IMG_1899.jpeg

 

MellowSigns
Visitor
1 0 0

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
Shopify Partner
6 0 5

Yes! 😊

KetanKumar
Shopify Partner
36904 3640 11985

@meridithshook3 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
shortcomings
Excursionist
46 0 14

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
Visitor
2 0 1

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
Shopify Partner
1047 146 153

Try this tutorial 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
debbieps
Tourist
8 0 1

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)

 

Screenshot 2023-12-02 at 19.23.30.png

 

Thank you!

guiguimorning
New Member
8 0 0

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 automaticallydesktop.jpgmobile.jpg

Zee908
Visitor
1 0 0

it works!! omg thankyou!