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

SarahGua · ‎05-05-2025

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/😞 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!

Moeed · ‎05-05-2025

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

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

SarahGua · ‎05-05-2025

goldi07 · ‎05-05-2025

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 <body>, like:

<body class="template-index">

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

2. 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.

3. 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 😊

Was I helpful?

Buy me a coffee

❤
APPS BY US :

Professional Customer Accounts APP

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here

SarahGua · ‎05-05-2025

Hello where exactly im adding those codes ?

tapan_sain · ‎05-06-2025

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.

goldi07 · ‎05-06-2025

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.

2. 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");
      }
    });
  }
});

3. Link the JS File to Your Theme
Where:
Open: layout/theme.liquid
Just before the closing </body> 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 😊

Was I helpful?

Buy me a coffee

❤
APPS BY US :

Professional Customer Accounts APP

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here

SarahGua · ‎05-06-2025

not working

tapan_sain · ‎05-05-2025

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.

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