Out of the Sandbox Flex Theme Header Change colour on Scroll

Store Design
, ,

Topic summary

A user manually coded a sticky header in the Flex theme to avoid the default hamburger menu behavior. The sticky header works well on content and product pages (which have white backgrounds), but on the homepage it overlays an image without a background.

Problem: The header needs to change its background color to white only when the user scrolls down on the homepage.

Attempted Solution: A support team member (DaisyVo) provided CSS code to be added above the </body> tag in theme.liquid. The code targets the homepage template and applies white background styling to the header.

Current Status: The solution didn’t work as intended—the header background turns white immediately on page load rather than triggering on scroll. The issue remains unresolved, requiring a scroll-based trigger mechanism (likely JavaScript) instead of static CSS.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
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?