Out of the Sandbox Flex Theme Header Change colour on Scroll

Store Design
, ,
1

Hi. I have had to manually code the header in the Flex theme to stay sticky as the inbuilt sticky option changes the header completely into a hamburger menu which customer doesnt want. So after coding the header to stay sticky - this works great on all the content/product pages etc as the header on those pages is white, but on the home page the header is overlay the image below. Does anyone have a way in the Flex theme to change the header background colour to white once it scrolls?

2

Hi @lcameron
Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

3

Thank you. URL is https://aribella.com.au/

4

Hi @lcameron

Add this code above the tag, in the theme.liquid file
https://prnt.sc/9W1BEGOaZy6H

{% if template.name == "index" %}
  
  {% style %}
    header#header {
        background: white !important;
    }
    header#header * {
        color: black !important;
    }
    a.header__logo.header__link.overlay-logo .image-element__wrap > img {
        filter: brightness(0) !important;
    }
  {% endstyle %}
{% endif %}

DaisyVo_0-1738639193377.png
DaisyVo_0-1738639193377.png1375×692 302 KB

Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team

5

Hi, sorry didn’t work - the background is white as soon as page loads, not just when it scrolls?