how to make transparent header in dawn theme 11.0

usman-store1
Tourist
5 0 2

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.

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
5358 1294 1586

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


usman-store1
Tourist
5 0 2

pakfs.myshopify.com
Password : store

usman-store1
Tourist
5 0 2

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
Shopify Partner
5358 1294 1586

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

Made4uoRibe_0-1698268082816.png

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


usman-store1
Tourist
5 0 2

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
Astronaut
840 175 155

 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

usman-store1
Tourist
5 0 2

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

usmanstore1_0-1698304345680.png

 

PageFly-Oliver
Astronaut
840 175 155

 Can you share the screenshost position added code?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.