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

Technical Q&A

Topic summary

Goal: In the Shopify “Ride” theme, make the header transparent when at the top, turn opaque on scroll, and have it overlap the banner (or move the banner to the very top).

Key steps taken:

  • The helper requested the store link; access was initially blocked by a password and then enabled.
  • A code change was provided to add in theme.liquid right after , scoped to the homepage using {% if template == ‘index’ %} … {% endif %}.
  • This initially achieved the desired effect, and the requester confirmed it worked.

Current status/update:

  • The solution later stopped working as intended. The banner remains at the top, but the header is now fully opaque instead of transparent at the top.
  • The requester asked how to restore the transparent-at-top behavior.

Notes:

  • Images were shared to illustrate the desired transparent-over-banner look and the opaque-on-scroll state; these visuals are central to the design goal.
  • No final fix or explanation for the regression has been provided yet; the issue remains open.
Summarized with AI on December 14. AI used: gpt-5.
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
IMG_7611.jpeg1170×336 39.3 KB

Transparent header overlapping with the banner picture below

IMG_7612.jpeg
IMG_7612.jpeg1170×377 37.4 KB

turning opaque when scrolling up

thanks in advance for any replies!

N

2

Hi @GaSstorebikes

Please share your store link

3

https://fipcan-vt.myshopify.com/?_ab=0&_fd=0&_sc=1

4

Your store has password-protected

5

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

6

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

{% if template == 'index' %}

{% endif %}
1 Like
7

This worked perfectly, thank you so much!!! :folded_hands:t2:

1 Like
8

Happy I could help!

9

Hi, sorry to bother you again, but this code seems to have stopped working correctly. The image banner is still moved to the top but the header is completely opaque now. Is there any way to change it back to being transparent?

best regards

N