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

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

Hi @komesoap

Do you mean want to your look like this?

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

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

{% if template == 'index' %}

{% endif %}
2 Likes

That worked perfectly!! Thank you so much Dan! :grinning_face:

1 Like

You are very welcome

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?

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

Thank you!

Please check store URL, it is not correct

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

Please update code to this and check


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

1 Like

Glad I could help!

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

Please send me black logo version

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

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

OK, got it! Does this link work?

Please update code