Solved

How to create a transparent header in Dawn version 13.0?

hefoli
Tourist
14 0 2

How can I make the header part transparent in Dawn version 13.0? The codes in the previous solutions did not work.

Accepted Solution (1)
Emirates7
Shopify Partner
214 50 40

This is an accepted solution.

Here is new code:

 

sticky-header {
background: transparent !important;
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.utility-bar {
display: none !important;
}

 

Add it again to custom css.

 

Regards,

Emirates7

View solution in original post

Replies 7 (7)

Emirates7
Shopify Partner
214 50 40

Hi Hefoli,

 

Can you provide your store url?

 

Regards,

Emirates7

hefoli
Tourist
14 0 2

Hi Emirates8,

 

Can you check it from this link? There is nothing yet on the website, I have been struggling with transparency for 3 days and every time the codes are so confused that I start over.

 

https://ujpt9cyruh3i95w0-85574287682.shopifypreview.com

Emirates7
Shopify Partner
214 50 40

Hi Hefoli,

 

Go to Online Stores -> Themes -> Customize -> Theme Setitngs -> Custom CSS and add below code:

 

sticky-header {
background: rgba(255, 255, 255, 0.6) !important;
}

 

1.png

 

Regards,

Emirates7

hefoli
Tourist
14 0 2

First of all, thank you for your help. But I have 2 questions. Firstly, is it possible to be transparent when I first enter the screen? In other words, as soon as I enter the website, I want the photo in the banner to appear and I want to have a transparent sticky header in it. Secondly, it is not fully transparent when scrolling down, but I want it to be fully transparent. Thank you for your attention in advance.

Emirates7
Shopify Partner
214 50 40

This is an accepted solution.

Here is new code:

 

sticky-header {
background: transparent !important;
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.utility-bar {
display: none !important;
}

 

Add it again to custom css.

 

Regards,

Emirates7

hefoli
Tourist
14 0 2

Mate, thank you so much for your help. You saved me a lot of trouble. I will have more questions in the future and I would like to know if you are open for paid counselling when the time comes.

AboveTheSun
Tourist
12 0 1

Hello! I have used the code for the transparent header with great results. However I would like the header to change to a solid color black when scrolling down. Is that possible? Thanks!