Change Menu List Color

Shopify Discussion
,
1

Hi, can anyone help me how to change the color for menu list for transparent header. Just for homepage. Horizon theme.

I want it white for transparent header, i know there’s a button to change it but if i change it to white, then it also affects the header with (white background) when scroll down or at other page (collections, product)

Screenshot (39)
Screenshot (39)1920×1080 387 KB

2

Hi @veluxe1

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Hello! @veluxe1

Ah, the classic transparent header dilemma! Setting menu text to white works great over dark hero images, but then the links turn invisible the second you scroll down to the sticky white background or visit inner pages.

​Are you trying to change just the main menu link colors, or do you need the right-side icons (search, account, cart) to switch dynamically as well? Also, are you using the built-in Custom CSS field inside the Header section settings, or are you looking to edit the theme stylesheet directly?

4

here’s the URL

5

As for now just the menu list because the icon color work well when scroll down or at other page

6

You should’ve mentioned that this is not a default Horizon menu, but rather produced by an App.

The code, of course would be different.

Here is what I’d do:

  1. Add a “Custom liquid” section to your Template area for homepade
  2. Paste the following code:
<style>
 [data-sticky-state="inactive"] a.Meteor-Navigation__Link__desktop {
   color: white !important;
 }
</style>

Since this section is part of the Template, it will apply to the homepage only.
At top / Scrolled:

Screenshot 2026-07-26 at 2.02.40 AM
Screenshot 2026-07-26 at 2.02.40 AM731×419 55.7 KB
Screenshot 2026-07-26 at 2.02.58 AM
Screenshot 2026-07-26 at 2.02.58 AM731×419 57.9 KB

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it
7

Ah, that makes things much easier! If the icons are already behaving properly, you won’t need to mess with global header scripts.

​Are you looking to control this via the Custom CSS field right inside the Header section settings in the theme editor, or would you prefer adding a quick snippet to your base.css / theme stylesheet? Also, when the header turns white on scroll, is the main menu text supposed to switch back to dark/black so it stays readable?

8

Hi @veluxe1

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > style.css and paste this at the bottow of the file:

 [data-sticky-state="inactive"] a.Meteor-Navigation__Link__desktop {
   color: white !important;
 }

Best regards,
Devcoder :laptop:

9

@veluxe1 – note that adding code to base.css will apply it to all pages making menu unreadable (white on white) on pages other than homepage.

10

Thank you so much, really help me!