Thank you! It’s similar to the discount ones Brooklyn theme, but I believe I found a solution. Thank you for taking time to help.
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.
1 Like