How to create a transparent, color-changing, sticky header on Dawn theme?

Store Design
1

-How do I change the header to become transparent showing the image banner

-How do I add hover effects so when the mouse is over the header it changes color to white

-How do I make the banner sticky when scrolling

Website: https://b7865f-2.myshopify.com/

Shop Theme: Dawn

2

Hey @3baid

please follow below steps

Note: this is only for transparent header and hover effect.

Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save

.section-header .header-wrapper{
	background-color: transparent !important;
}
.section-header .header-wrapper:hover{
	background-color: white !important;
}
1 Like
3

Hi @Anonymous ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_2-1684253436290.png
PageFlyHenry_2-1684253436290.png1600×794 139 KB

PageFlyHenry_3-1684253447949.png
PageFlyHenry_3-1684253447949.png1600×777 197 KB

Hope this answer helps.

Best regards,

Henry | PageFly

4

For Sticky header Please see attached image
Step 1: Go to Online Store → Theme → Customize.
Step 2: Header Section
Step 3: change as i mention on attached image → Save.

sticky header.png
sticky header.png321×584 14.7 KB

5

unfortunately it didn’t work, any other suggestions?

6

it’s already set as “always”

7

As I see your sticky function is now enabled but it is not working, about this, I think you should contact Shopify or Theme so they can check the sticky functionality of your theme,