How to move image banner behind Header (Dawn theme)

Store Design

Topic summary

Users are seeking to position an image banner behind the header on Shopify’s Dawn theme homepage, with the header becoming opaque/white on scroll.

Initial Solution:

  • A CSS and JavaScript code snippet was provided to add before the </body> tag in theme.liquid, specifically targeting the index template.
  • The solution works when the background image changes.

Common Issues Encountered:

  • Width problems: Multiple users report the banner not extending full width, leaving white space on sides.
  • Fix: Adding header.header { max-width:100%; } to base.css resolves width issues.
  • Mobile display: Text/content appears divided or improperly positioned over the banner in mobile view.
  • Sticky header behavior: Some users experience unwanted sticky header with white background on scroll.
  • Page-specific application: Difficulty limiting the transparent header effect to homepage only, especially on mobile.

Current Status:

  • The thread remains active with ongoing troubleshooting requests.
  • Recent users (as of late 2024) question whether the original solution still works with current Dawn theme versions.
  • One user cannot locate the correct placement for the code in theme.liquid.
  • Several requests for store-specific assistance remain unanswered.
Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
30

Hi again,

Another quick question. I have implemented the code, and now the header is sticky/ turns white when I scroll down the page. This is the case for both dekstop and mobile version.

Could you assist me here as well?

Thanks in advance - I have tried attaching pictures.

Screenshot 2024-09-28 153426.png
Screenshot 2024-09-28 153426.png1509×652 81.8 KB

Screenshot 2024-09-28 153435.png
Screenshot 2024-09-28 153435.png1517×513 131 KB