Re: Header doesn't change colour on scroll

emekayode · ‎03-01-2024

URL: https://efpqlt6kjr4cbg3d-17240367.shopifypreview.com

Password: testcode123

I tried adding the code below into my theme.liquid below the <head> tag to basically make my header transparent (which it already is) and then once a user scrolls it will make the header background change colour but the code does not seem to be doing anything. Is there anything else I should be doing?

{% if template == 'index' %}
<style>
.scrolled-past-header .header-wrapper {
background-color: #fff;
transition: background-color 1000ms ease;
}
.scrolled-past-header .header-wrapper * {
color: #333;
transition: color 1000ms ease;
}
</style>
{% else %}
<style>
.shopify-section-group-header-group .header-wrapper {
background-color: #fff;
}
.shopify-section-group-header-group .header-wrapper * {
color: #333;
}
</style>
{% endif %}

magenest · ‎03-07-2024

Hi @emekayode,

We checked and your store link is not working.

Can you share with us your store's new URL and password (if any) so our team can check on that?

We would love to provide you with a solution for your issues.

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers

emekayode · ‎03-08-2024

the new link is www.swampclo.com

magenest · ‎03-10-2024

Hi @emekayode,

We found someone with your exact problem. You can check out their useful solution for that here: https://stackoverflow.com/questions/74479210/add-class-on-scroll-not-working-in-shopify-enviroment

Hope this helps, and if you need further support, reply and we will be happy to answer any of your questions.

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers

emekayode · ‎03-11-2024

thanks for that, but I'm not particular sure where to even put those block of javascript and css code as the location of the code is what would enable it to work correctly

Re: Header doesn't change colour on scroll

Why doesn't my header color change on scroll?

Community Blog Articles