How do I extend image to top of page (so that it appears layered under the navigation bar and logo)

[komesoap]

Can I get your help on my hero image on my website? I want to extend the margin of the hero image all the way to the top (so that the margin starts under the free shipping announcement. I'm using the Sense theme and I am using its Image Banner module as my hero graphic section.

Thank you!

Stephanie

[Dan-From-Ryviu · Accepted solution]

Please go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag and save file

{% if template == 'index' %}
<style>
.header-wrapper { background: transparent !important; }
#MainContent { margin-top: -157px !important; }
</style>
{% endif %}

[Dan-From-Ryviu]

Hi @komesoap 

Do you mean want to your look like this? 

[komesoap]

Hi Dan, thanks for responding to my post! Yes that's exactly what I want to achieve.

[Dan-From-Ryviu · Accepted solution]

Please go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag and save file

{% if template == 'index' %}
<style>
.header-wrapper { background: transparent !important; }
#MainContent { margin-top: -157px !important; }
</style>
{% endif %}

[komesoap]

That worked perfectly!! Thank you so much Dan! 😀 

[Dan-From-Ryviu]

You are very welcome

[komesoap]

Hi Dan, I have a follow up question. This might be more complicated so no worries if it can't be done. 

Is there a way to have all the text including my logo be white while it's on transparent overlay. Then later on scroll up, when the sticky bar comes out, the menu bar changes to non-transparent and the text and logo changes back to black?

[Dan-From-Ryviu]

Yes, it can be. Please send me your store link again so I can check

[komesoap]

Thank you!

[Dan-From-Ryviu]

Please check store URL, it is not correct

[komesoap]

Sorry about that! Does this work? www.madewithine.com

[Dan-From-Ryviu · Accepted solution]

Please update code to this and check 

<style>
.header-wrapper { background: transparent !important; }
.header-wrapper .header__icons--localization .localization-form:only-child .localization-form__select,
.header-wrapper .header__inline-menu .list-menu__item,
.shopify-section-group-header-group .header-wrapper .header__icon, .shopify-section-group-header-group .header-wrapper .header__icon--cart .icon { color: #fff; }
.shopify-section-header-sticky .header-wrapper .header__icons--localization .localization-form:only-child .localization-form__select,
.shopify-section-header-sticky .header-wrapper .header__inline-menu .list-menu__item,
.shopify-section-header-sticky .header-wrapper .header__icon, 
.shopify-section-header-sticky .header-wrapper .header__icon--cart .icon { color: #333 !important; }
.shopify-section-header-sticky .header-wrapper { background: #fff!important; }
{% if template == 'index' %}
#MainContent { margin-top: -157px !important; }
{% endif %}
</style>

[komesoap]

Oh my goodness! Amazing! It works perfectly! Thank you again Dan!!! 

[Dan-From-Ryviu]

Glad I could help! 

[komesoap]

Hi Dan, just one more small detail, if you don't mind. Is it possible to exempt mobile from the same settings?

[Dan-From-Ryviu]

Please send me black logo version

[komesoap]

Here you go! My black logo is here: https://www.dropbox.com/scl/fi/aaovuypybmziaz21wn1h5/Ine-Logo-copy.png?rlkey=ug6bjq5p1eudxr35wlu0ptt...

[Dan-From-Ryviu]

Please upload it to your store admin > Content > Files then give me that link 

[komesoap]

OK, got it! Does this link work?

[Dan-From-Ryviu]

Please update code 

<style>
.header-wrapper { background: transparent !important; }
.header-wrapper .header__icons--localization .localization-form:only-child .localization-form__select,
.header-wrapper .header__inline-menu .list-menu__item,
.shopify-section-group-header-group .header-wrapper .header__icon, .shopify-section-group-header-group .header-wrapper .header__icon--cart .icon { color: #fff; }
.shopify-section-header-sticky .header-wrapper .header__icons--localization .localization-form:only-child .localization-form__select,
.shopify-section-header-sticky .header-wrapper .header__inline-menu .list-menu__item,
.shopify-section-header-sticky .header-wrapper .header__icon, 
.shopify-section-header-sticky .header-wrapper .header__icon--cart .icon { color: #333 !important; }
.shopify-section-header-sticky .header-wrapper { background: #fff!important; }
.shopify-section-header-sticky .header-wrapper .header__heading .header__heading-logo-wrapper {
background-image: url('https://cdn.shopify.com/s/files/1/0665/9614/3353/files/Ine_Logo_copy.png?v=1678854891');
background-size: cover;
background-position: center;
}
.shopify-section-header-sticky .header-wrapper .header__heading .header__heading-link img { opacity: 0; }
{% if template == 'index' %}
#MainContent { margin-top: -157px !important; }
{% endif %}
</style>

[komesoap]

You are a saint and a scholar Dan! I don't know how to thank you enough!! ❤️

[Dan-From-Ryviu]

Happy I could help 😊

[Dan-From-Ryviu]

Could I send collaborator request so I can check and fix the code directly on your store? 

[komesoap]

Sure!

[Dan-From-Ryviu]

I sent request.

[komesoap]

Approved!

[st_dd22]

Does this code work with the Dawn theme? As I am having some issues with it. Thank you!

[st_dd22]

Hello! I am having some issues with this code. Can you please help? Thank you

[fusionspa]

hey Dan, I used this solution for my website and it worked on desktop. But when i check mobile, the image and the text are stacked, not overlayed like how its displayed on desktop. is there a solution for this?