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

Shopify Discussion

Topic summary

A user is trying to implement a dynamic header design similar to kith.com: on the homepage, the header should start with a transparent background, white logo, and white text that turns black on scroll. On all other pages, the header should always display a black logo and black text with a white background.

Proposed Solutions:

  • Use JavaScript to detect the current page (homepage vs. others) and toggle CSS classes based on scroll position
  • Leverage Shopify’s built-in .template-index body class to target the homepage specifically
  • Upload two logo versions (white and black) and swap them using CSS content: url() property
  • Add custom CSS to base.css or theme.css for styling the transparent and default header states
  • Include JavaScript in custom.js or theme.js to handle scroll detection on the homepage only
  • Link the JavaScript file in theme.liquid before the closing </body> tag

Current Status:

The user attempted the suggested implementation but reported it’s “not working.” One contributor mentioned that if a sticky header is already in place, the solution might be achievable with CSS alone, without JavaScript. The discussion remains unresolved and requires further troubleshooting.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Sure! Here’s a clear and professional title and post you can use on the Shopify Community forum:

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

Post Content:

Hi everyone,

I’m working on customizing my Shopify store’s header and could use some help. On the homepage, I’ve designed the header to look like [kith.com](https://kith.com/ :disappointed_face: it starts with a transparent background, white text, and a white logo because it overlays a hero section.

When I scroll or hover, the navigation text and logo turn black for better visibility — and that part works well.

The issue I’m having is on other pages (collection pages, product pages, etc.). The header should always show the black logo and black text on those pages, because there’s no hero image behind it and background is white.

How can I make the header:

  • Show white logo + white text with transparent background on the homepage before scroll,
  • And automatically use black logo + black text (no transition needed) on all other pages?

If anyone has done something similar or knows a clean way to implement this, I’d appreciate your help!

Thanks in advance!

2 Likes
2

Hey @SarahGua

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

1 Like
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:

1 Like
4

Hello @SarahGua

Let me explain how it works on the Kith site:

  • They use an SVG for the logo and change its color dynamically as the user scrolls.

You can achieve a similar effect. For example, on the Home (Index) page, you could use a white background for the logo initially, and then change it on scroll. On other pages, you might go with a black background from the start.

It’s a simple and clean way to keep the branding consistent while enhancing the visual experience.

1 Like
5

Hello where exactly im adding those codes ?

1 Like
6

Hello @SarahGua

You don’t need to paste the entire code. Based on your site, you need to use it. Do you have a sticky header? If yes, then you will not need to add any JS. You can achieve this by using CSS.

7

Here’s exactly where to place each part of the solution in your Shopify theme (I’ll assume you’re using a modern Online Store 2.0 theme like Dawn or something similar — let me know if it’s a different one):

Step-by-Step Placement Guide

  1. CSS Code (for styling the header)
    Where:
    Go to Online Store > Themes > Edit code
    Open: assets/base.css (or theme.css or styles.css, depending on your theme)

Add at the bottom of the file:

/* Transparent header styles for homepage */
.template-index .site-header.transparent {
  background-color: transparent;
  color: white;
}

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

/* Default header for all other pages or scrolled homepage */
.site-header {
  background-color: white;
  color: black;
}

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

Make sure you’ve uploaded logo-white.png and logo-black.png under Settings > Files, or better yet, in Assets if you’re comfortable editing code references.

  1. JavaScript Code (to add scroll behavior)
    Where:
    In the same code editor, open or create:
    assets/custom.js (or if your theme already has a file like theme.js or global.js, you can use that)

Add this at the bottom:

document.addEventListener("DOMContentLoaded", function () {
  const header = document.querySelector(".site-header");

  if (document.body.classList.contains("template-index")) {
    // Initial state: transparent
    header.classList.add("transparent");

    // Change on scroll
    window.addEventListener("scroll", function () {
      if (window.scrollY > 50) {
        header.classList.remove("transparent");
      } else {
        header.classList.add("transparent");
      }
    });
  }
});
  1. Link the JS File to Your Theme
    Where:
    Open: layout/theme.liquid
    Just before the closing tag, add:
{{ 'custom.js' | asset_url | script_tag }}

If you put the JavaScript in theme.js instead, you can skip this step since it’s already included.

Final Touches
. Make sure you upload both versions of your logo to the Assets folder (or Files).

. Replace the names in the url(‘{{ “logo-black.png” | asset_url }}’) with your actual filenames.

if you need any help plz let me know i will try to fix it

Thank you :blush:

1 Like
8

not working