Help with Header Logo/Text Navigation Color – White on Home, Black on Other Pages

Shopify Discussion
3

Hello @SarahGua You’re on the right track, and this is a very common design pattern—especially for modern storefronts with hero banners. To accomplish this cleanly on Shopify, you’ll need to:

Solution Overview:

  1. Use JavaScript to detect the current page (homepage vs other pages).

  2. Use CSS classes to style the header differently based on:

. Scroll position (for homepage only)

. Whether you’re on the homepage or not

Implementation Steps:

  1. Add page-specific class to body (optional but helpful)
    Shopify already includes a template class in the , like:

You can use .template-index to target the homepage specifically.

  1. Update your header CSS
/* Default state for all pages */
.site-header {
  background-color: white;
  color: black;
}

.site-header .logo {
  content: url('{{ 'logo-black.png' | asset_url }}');
}

/* Transparent header on homepage before scroll */
.template-index .site-header.transparent {
  background-color: transparent;
  color: white;
}

.template-index .site-header.transparent .logo {
  content: url('{{ 'logo-white.png' | asset_url }}');
}

Make sure you upload two versions of your logo: one white and one black, and reference the correct one.

  1. Use JavaScript to toggle .transparent on scroll (homepage only)
document.addEventListener("DOMContentLoaded", function () {
  const header = document.querySelector(".site-header");

  if (document.body.classList.contains("template-index")) {
    // Only run on homepage
    window.addEventListener("scroll", function () {
      if (window.scrollY > 50) {
        header.classList.remove("transparent");
      } else {
        header.classList.add("transparent");
      }
    });

    // Initial state
    header.classList.add("transparent");
  }
});

Result:
. Homepage: Transparent header with white logo/text → switches to white background and black logo/text on scroll.

. Other pages: Loads with white background and black logo/text by default (no scroll detection needed).

Thank you :blush: