How to make header overlap with banner picture below (ride)

Solved

How to make header overlap with banner picture below (ride)

GaSstorebikes
Tourist
4 0 1

Hi! We’ve been trying to set up our online store and have run into a few issues with the header. We’re using the theme “Ride” and we’ve been trying everything to 1. Make the header transparent when completely scrolled to the top of the page and opaque when scrolling down and 2. Either move the header down to the Template, so that it’s layered on top of the banner picture or move the banner picture up, so that it’s placed on top of the page. 
I hope this makes any sense at all, since none of us has any idea of coding and our first language isn’t English, so if anyone has a solution for our problem, a detailed explanation would be greatly appreciated.

 

I’ll also put some pictures of a website that has exactly what we want

IMG_7611.jpeg
Transparent header overlapping with the banner picture below 

IMG_7612.jpeg

 turning opaque when scrolling up

 

thanks in advance for any replies!

N

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10072 2005 2055

This is an accepted solution.

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

{% if template == 'index' %}
<style>
#shopify-section-sections--22601863856393__header header { background: transparent !important; }
#MainContent { margin-top: -139px; }
html #shopify-section-sections--22601863856393__header.scrolled-past-header { background: #fff !important; }
html #shopify-section-sections--22601863856393__header.scrolled-past-header header .header__active-menu-item,
html #shopify-section-sections--22601863856393__header.scrolled-past-header .header__icon span,
html #shopify-section-sections--22601863856393__header.scrolled-past-header header .list-menu__item { color: #000; }
html #shopify-section-sections--22601863856393__header.scrolled-past-header .header__submenu { background: #fff; }
</style>
{% endif %}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
10072 2005 2055

Hi @GaSstorebikes 

Please share your store link

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
10072 2005 2055

Your store has password-protected

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GaSstorebikes
Tourist
4 0 1

Oh right, sorry, you should be able to access it now

Dan-From-Ryviu
Shopify Partner
10072 2005 2055

This is an accepted solution.

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

{% if template == 'index' %}
<style>
#shopify-section-sections--22601863856393__header header { background: transparent !important; }
#MainContent { margin-top: -139px; }
html #shopify-section-sections--22601863856393__header.scrolled-past-header { background: #fff !important; }
html #shopify-section-sections--22601863856393__header.scrolled-past-header header .header__active-menu-item,
html #shopify-section-sections--22601863856393__header.scrolled-past-header .header__icon span,
html #shopify-section-sections--22601863856393__header.scrolled-past-header header .list-menu__item { color: #000; }
html #shopify-section-sections--22601863856393__header.scrolled-past-header .header__submenu { background: #fff; }
</style>
{% endif %}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GaSstorebikes
Tourist
4 0 1

This worked perfectly, thank you so much!!!! 🙏🏻

Dan-From-Ryviu
Shopify Partner
10072 2005 2055

Happy I could help! 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.