Turn header white on scroll on store pages

Mrstep · August 23, 2025, 8:28pm

Need help turning the header white on scroll so the black logo to show. works fine on desktop and works fine on first page of mobile but does not work on other pages of site. www.cuzzoclothing.com

ericson2 · August 23, 2025, 11:51pm

@Mrstep Hi there,
It sounds like your header background isn’t changing on mobile for the other pages after scrolling. Since it works on desktop and the homepage, the issue is usually tied to how the JavaScript or CSS is targeting the transparent-header or sticky-header class.

A couple of things you can check:

CSS Targeting
Make sure your CSS rule for changing the header color on scroll applies globally, not just on the homepage. Sometimes themes add a .template-index selector (homepage only), so removing that or making your rule more general can fix it. Example:
```
.site-header.is-scrolled {
  background-color: #ffffff !important;
}
```

JavaScript Scroll Script
If you’re using a script to add the is-scrolled class, confirm that it’s loaded on all pages (not just index).
Example:

document.addEventListener("scroll", function() {
  const header = document.querySelector(".site-header");
  if (window.scrollY > 50) {
    header.classList.add("is-scrolled");
  } else {
    header.classList.remove("is-scrolled");
  }
});

Mobile Specifics
Some themes use a separate .mobile-header or .header-wrapper. Be sure both desktop and mobile elements get the same is-scrolled class applied.

If you share which theme you’re using (or if it’s custom), I can help point you to the exact file to update.

SkillUpDennis · August 24, 2025, 12:01am

It looks like the scroll effect is only applied on the homepage. You’ll need to update the theme JavaScript so the “change header on scroll” code runs on all pages, not just the index. If you’re not comfortable editing JS, a quick fix is to ask your theme developer or Shopify support to extend it site-wide.

Mrstep · August 24, 2025, 12:18am

Hi it is a custom theme that I am using.

ericson2 · August 24, 2025, 12:21am

https://codeshare.io/2j8JWL

ericson2 · August 24, 2025, 12:26am

@Mrstep Hi! Thanks for clarifying no worries at all that you’re on a custom theme, this can still be handled easily. The key is just finding the right class name your theme uses for the quantity section.

Here’s what you can do:

Go to your product page in Chrome (or any browser), right-click on the quantity area, and select Inspect.
Look for the parent container around the “Quantity” label + selector. It might be something like .product-form__quantity, .quantity-wrapper, or a custom name depending on your theme.
Once you spot that class, replace .product-form__quantity in the CSS with your theme’s class name:

@media screen and (max-width: 749px) {
  .your-theme-class-here {
    text-align: center;
  }
  .your-theme-class-here .quantity {
    margin: 0 auto;
  }
}

This ensures:

Only the quantity section and its labels get centered on mobile.
Your product title and other elements remain untouched.

If you’d like, you can drop me the class name you see in Inspect, and I can send you the exact code ready to paste that way you don’t have to guess.

Mrstep · August 24, 2025, 1:05am

Hi dont know if this would help I had my alternative site up. While I work on this one to be my main site I have now published it and you can check it out now. I really truly appreciate your help!!

ericson2 · August 24, 2025, 1:10am

@Mrstep That’s great to hear! I’m glad you’ve been able to publish the site it looks like you’re making solid progress. Happy to help anytime as you continue building it into your main store. Keep me posted on how things go!

Mrstep · August 24, 2025, 1:14am

LOLOL I meant, If you wanted to look with inspecting the code to see where it is you can look now because I published it so you can find the code and where the code you would give me will help

ericson2 · August 24, 2025, 1:28am

@Mrstep To make the header turn white on scroll across all pages (not just the homepage), add this CSS in your theme stylesheet (base.css or theme.css):

.sticky-header.header-wrapper.color-background-1.gradient.active {
  background: #fff !important;
}
@media only screen and (max-width: 749px) {
  .sticky-header.header-wrapper.color-background-1.gradient.active {
    background: #fff !important;
  }
}

Then add this JavaScript before </body> in theme.liquid:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('.header-wrapper');
    window.addEventListener('scroll', function() {
      header.classList.toggle('active', window.scrollY > 10);
    });
  });
</script>

This ensures the header background switches to white on scroll for desktop and all mobile pages, keeping the black logo visible everywhere.

How to Implement

Go to Shopify Admin → Online Store → Themes → click Actions → Edit Code.
Open your main stylesheet (base.css, theme.css, or similar) and paste the CSS blocks above at the end.
Open theme.liquid and insert the JavaScript snippet just before </body>.
(Optional) Wrap sections in if template.name == 'index' if you only want this effect on the homepage.
Save and test across various pages on mobile and desktop.

Mrstep · August 24, 2025, 1:44am

Still doing the same thing this is how it looks: and beneath is what I pasted.

ericson2 · August 24, 2025, 1:58am

@Mrstep

Got it Thanks for sharing the screenshots I can clearly see the issue. The problem is that your header background is staying transparent/gradient on other pages (mobile especially), even after adding the CSS + JS. That means either:

The JavaScript isn’t attaching the .active class correctly across all pages.
The CSS selectors being overridden by Shopify’s built-in styles (Shopify themes often use color-background-1, header-wrapper, or inline styles).
The sticky header structure on collection/product pages is slightly different from the homepage, so the rule you applied doesn’t fully match.

Here’s a fixed solution you can try:

CSS (add to bottom of `base.css` or `theme.css`)

/* Force header background to white when active */
.header-wrapper.active,
.sticky-header.active {
  background: #fff !important;
}

/* Also make sure gradient/transparent classes don’t override */
.header-wrapper.active.gradient,
.sticky-header.active.gradient {
  background: #fff !important;
}

JavaScript (place before `</body>` in `theme.liquid`)

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('.header-wrapper, .sticky-header');
    if (!header) return;

    function toggleHeader() {
      if (window.scrollY > 10) {
        header.classList.add('active');
      } else {
        header.classList.remove('active');
      }
    }

    // Run on scroll + once on page load
    window.addEventListener('scroll', toggleHeader);
    toggleHeader();
  });
</script>

Why this works

I’ve widened the selector to .header-wrapper, .sticky-header because Shopify sometimes uses slightly different wrappers depending on the page.
I force-set the background on .active.gradient so Shopify’s gradient class can’t override it.
I added toggleHeader() on page load to make sure it applies immediately (some pages load scrolled down).

Try this exactly and refresh your site in incognito mode (Shopify often caches CSS/JS).
If it still doesn’t work, we’ll inspect the actual header class names from your other pages (product/collection) since they may have extra wrappers.

Mrstep · August 24, 2025, 2:05am

Do I need to delete what I added before or just add this under it?

ericson2 · August 24, 2025, 2:09am

@Mrstep It’s best to remove the old code and replace it with the updated version I shared. That way there won’t be any conflicts or duplicate rules, and it’ll be easier to manage going forward.

After replacing, save and test in incognito mode to see the changes.

SkillUpDennis · September 23, 2025, 8:32pm

On your site the header background isn’t updating on scroll for inner pages. You can fix this by adding a small script that changes the header background once you scroll:

document.addEventListener("scroll", function() {
  const header = document.querySelector(".header-wrapper");
  if (window.scrollY > 50) {
    header.style.backgroundColor = "#ffffff"; // white
  } else {
    header.style.backgroundColor = "transparent";
  }
});

Place this in theme.liquid just before the </body> tag. If your theme uses a different class than .header-wrapper, right-click the header, inspect the element, and replace it with the correct selector.

Topic		Replies	Views
How to change header from transparent, back to a normal filled background when scrolling Store Design header	18	144	February 4, 2025
Make Header on Home page transparent and when scroll down turn to solid white Store Design design , header , css	7	93	December 31, 2023
Change transparent header color to white on scroll Store Design customizations	7	109	November 30, 2023
Header Design - transparent to white when scrolling down, while change the logo color Store Design design	20	171	December 10, 2024
On Home Page, Header should be transparent, when scroll down, should turn to normal, solid white Store Design design , header	9	146	September 3, 2023

Turn header white on scroll on store pages

CSS (add to bottom of base.css or theme.css)

JavaScript (place before </body> in theme.liquid)

Why this works

Related topics

CSS (add to bottom of `base.css` or `theme.css`)

JavaScript (place before `</body>` in `theme.liquid`)