How to create a transparent header in Dawn version 13.0?

[hefoli]

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

[Emirates7]

Hi Hefoli,

Can you provide your store url?

Regards,

Emirates7

[hefoli]

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]

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;
}

Regards,

Emirates7

[hefoli]

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 · 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]

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]

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!