Hi, I want to have my image banner only in the Main Page behind the Header in desktop and Mobile as well. But on a scroll down I want it to become white again.
This is how I want it to look:
This is how it looks now:
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.
@arutze , Please add the below line CSS and Js at theme.liquid file. just before the ending of tag.
{% if template == 'index' %}
{% endif %}
3 Likes
wow thank you very much @webwondersco ! just one question, If I change my background image, it will still work right?
@arutze , Yes, it’s work fine.
changing the background image will not affect the current functionality.
Hi, i would like the same thing as @arutze
Should i copy the codes that you’ve sent above or they might have change now, due to updates?
Thank you in advance.
Hi, I tried using the code, it works, and i try to modify the color, but it turns out like this, can you help me which part I should modify to make it full width?
Thanks
Hi! Just wondering if you figured out how to make it full width? I am having the same issue and increasing the width in the code doesn’t seem to help. @webwondersco
@tallowbar Could you please share your store URL? so can check and figure it out
@taylor345 Could you please share your store URL?
@Glond IF you are using the same theme then it’ll also work for your store
Thank you for this @webwondersco ! Exactly what I needed, however it is not full width and I’m trying to make it centered but it is not budging. As well as making it a sticky header Any help?
@laurynaw1 Sure could you please share your store URL and screenshot of exactly how you would like to display?
Hello! @webwondersco I would like the image to bleed all of the way through. Which we’ve accomplished with this code. But I want it to be fixed on the image banner only not scrolling down and it turns white.
and to have my menu drawer all white with the logo not the transparent with logo
(correct way)
(Wrong way)
Www.donleaux.com is my url.
Thank you!
@laurynaw1 The website is password protected. could you please share the front password as well?
@webwondersco Password: Leauxleaux
Thank you
@laurynaw1 Please add the below line of CSS at the end of your base.css file. You can find this file under assets folder of your theme.
body .header.transparent{
background-color:#ffffff;
}
Result:
1 Like
@laurynaw1 So, you want to keep the header as it is as of now. You just want to make the menu drawer with full width and have white background with logo of website?
If yes, then it is like need to add some custom code to your theme to make it possible.
1 Like
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.
1 Like
Thank you @webwondersco Its working for me but unfortunately its not full width.. running into the same issues as people above. Any chance you could please have a look? Thank you https://hvngglb39md9yf7s-83068584245.shopifypreview.com
@curator_2 PLease add the below line of CSS code at the end of your base.css file.
header.header{
max-width:100%;
}