how to make transparent header in dawn theme 11.0

[usman-store1]

I'm using Shopify's Dawn theme version 11.0 for my online store, and I'm looking to create a transparent header. I've searched through the theme customization options but couldn't find a straightforward setting to make the header transparent. Could you please provide guidance on how to achieve a transparent header in the Dawn theme 11.0? Are there specific settings within the theme, or do I need to use custom CSS to accomplish this effect? I want to ensure that the header remains fully functional and responsive while being transparent. Thank you for your assistance.

[Made4uo-Ribe]

Hi @usman-store1 

Just to let you know if you transparent the header the result will be white. It would not be the background of your banner. Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[usman-store1]

pakfs.myshopify.com
Password : store

[usman-store1]

https://pakfs.myshopify.com/

password: store
Plzz Provide me solution or piece of code to make my header transpearent and become solid color on strolling 

[Made4uo-Ribe]

Unfortunately, that needs a additional liquid code and javascript so it have a color when it scrolled. Do you mean like this right?

[usman-store1]

kindly share piece of code to make header transparent in home page while opaque on scrolling and for all other pages the header must not be transparent 

Also tell me where to add this code Its a humble request 

[PageFly-Oliver]

Hi @usman-store1 ,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
.sticky-header{
background: transparent !important;
}
#MainContent{
margin-top:-85px 
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[usman-store1]

This code is not working I Followed same steps a you mentioned

[PageFly-Oliver]

 Can you share the screenshost position added code?

[MRamzan]

Make your transparent header: