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

Solved

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

komesoap
Excursionist
23 0 4

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

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an 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 %}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an 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>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 26 (26)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Hi @komesoap 

Do you mean want to your look like this? 

Screenshot 2023-11-21 at 15.12.01.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an 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 %}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

You are very welcome

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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
Shopify Partner
8532 1682 1692

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

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

Thank you!

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Please check store URL, it is not correct

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an 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>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Glad I could help! 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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
Shopify Partner
8532 1682 1692

Please send me black logo version

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4
Dan-From-Ryviu
Shopify Partner
8532 1682 1692

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

OK, got it! Does this link work?

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

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>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Happy I could help 😊

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

Sure!

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

I sent request.

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

komesoap
Excursionist
23 0 4

Approved!

fusionspa
Visitor
1 0 0

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?