Dawn Theme - Sticky Header Inline Then When Scroll Condensed

Store Design

Topic summary

A user working with Shopify’s Dawn theme wants the sticky header to display in inline style initially, then switch to condensed style when scrolling down. They attempted using JavaScript to toggle CSS classes (header--inline, header--condensed) but the approach didn’t work.

Current Status:

  • The user shared theme settings screenshots showing their configuration
  • One responder confirmed Dawn theme lacks this functionality by default and requires custom code implementation
  • Another commenter requested the store link and password to examine the issue and propose a solution

Key Issue: The class-swapping method alone appears insufficient, likely requiring additional CSS modifications or a different technical approach to achieve the desired header behavior transition.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

I am using the Dawn theme and would like to have the sticky header inline style, then have it turn to condensed style when scrolling. I used js to add and remove class (header–inline, header–condensed) but it didn’t make a difference. Any help would be appreciated. Thank you in advance.

Theme settings

settings.png
settings.png542×334 7.98 KB

header_example.png
header_example.png1200×318 68.8 KB

2

Hi @J0hnnyB

Default dawn them does not have this function, you wont need to add customized code to do your request.

3

Hi @J0hnnyB ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.