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

Store Design

Topic summary

A user seeks to implement three header customizations on their Shopify Dawn theme: transparent header overlay on banner images, color-change hover effects, and sticky header behavior while scrolling.

Solutions Provided:

  • Transparent header with hover effect: Add CSS code to the base.css file making the header background transparent by default and white on hover
  • Sticky header: Enable through Theme Customizer under Header Section settings (set to “always”)
  • Alternative approach: PageFly suggests adding custom code to theme.liquid before the </body> tag

Current Status:

The user reports the solutions didn’t work initially. The sticky header setting was already enabled but not functioning properly. A support representative recommends contacting Shopify or the theme developer directly to troubleshoot the sticky functionality issue, as this may be a theme-specific technical problem requiring deeper investigation.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
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,