Change a single menu color on Pipeline

Shopify Discussion
1

Hi!

I have done this before, but not in the pipeline theme, I am not sure if that is the problem or not! By chance, does anyone know how to change the color of one menu bar item (SALES) to red?

I tried this:

.nav-bar__item a[href=“/collections/2023-gift-guide”] { color: red; }

However, it did not work! Does anyone have any suggestions?

Our website : maisondavis.ch

Thanks in advance

1 Like
2

Hello @JulianDavis

1.Go to Shopify Admin → Online Store → Themes.
2.Click “Edit Code” on your active theme.
3.Open base.css, theme.css, or stylesheet.css (whichever your theme uses in the assets folder).
4.Scroll to the bottom of the file.
5.Paste the CSS code above.

.site-nav__link[href="/collections/2023-gift-guide"],
.nav-bar__item a[href="/collections/2023-gift-guide"] {
    color: red !important;
}

6.Click Save and refresh your site.

Thank you :blush:

3

@JulianDavis
If you heightligh the sale menu element you can use this js

// Select all menu items inside nav.header__menu
  const menuItems = document.querySelectorAll("nav.header__menu .menu__item");

  menuItems.forEach(function(item) {
    const linkText = item.querySelector("a .navtext");
    
    // Check if the text is 'SALES'
    if (linkText && linkText.textContent.trim() === "SALES") {
      item.style.backgroundColor = "red"; // Change background color to red
    }
  });

, inset this in your theme assets\theme.js or global.js

4

Hello Goldi,

Thank you,

I tried but it doesn’t work,
Should I replace 2023-gift-guide with sales? I tried but it doesn’t work

5

Under the header try adding the following CSS into the custom CSS field.

To change the “SALES” menu item to red, use this CSS targeting its specific link:

/* Target the SALES menu item by its URL */
.navlink[href="/collections/sales"] .navtext {
  color: red !important;
  /* If needed, also change hover color: */
  transition: color 0.2s;
}

.navlink[href="/collections/sales"]:hover .navtext {
  color: #cc0000 !important;
}

Explanation:

  1. Uses an attribute selector [href=“/collections/sales”] to target the specific menu item

  2. Targets the text element with class .navtext

  3. !important ensures it overrides existing styles

  4. Added hover state for better interaction

Pro Tip: If your theme uses CSS variables, you could alternatively override the color variable:

css

Copy

.navlink[href="/collections/sales"] {
  --navtext-color: red !important;
}

Hope that helps.

1 Like
6

Hey @JulianDavis

Ensure the correct URL path is used

right-click the SALES menu item on your website.
. Select Inspect and check the exact href value in the tag.
. The href might not be /collections/sales; it could be something like /pages/sales or a different collection name.
. Try a more specific selector

If the original CSS doesn’t work, try this alternative:

a.site-nav__link[href*="sales"],
.nav-bar__item a[href*="sales"] {
    color: red !important;
}

. This targets any link that contains “sales” in the URL, even if it’s /collections/sales, /pages/sales, or something else.

. do a Hard Refresh

After saving, you should press Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac) to clear the cache and see the changes.

Thank you :blush:
7

Thank you very much Goldie,

I tried a lot of alternative but unfortunately it didn’t work..

When I inspect the link, here is what I find:

SALES

SALES

Do you see a reason why it wouldn’t work?

Thank you again

1 Like
8

THANK YOU IT WORKED!!!
I also noticed I had to adjust the link according to the language I’m usingon the website

For exemple, for the french version, I needed to add /fr/collections/sales

anyway, it works perfectly, thank you very much!!

9

Hey @JulianDavis

Based on the inspected HTML you provided, your original CSS didn’t work likely because of class specificity. Try this updated CSS:

.navlink.navlink--toplevel[href="/collections/sales"] {
    color: red !important;
}

Explanation:
. . navlink.navlink–toplevel is the class assigned to your menu items.
. [href=“/collections/sales”] ensures we are only targeting the SALES menu item.
. !important forces the style to override other CSS rules.

If That Doesn’t Work:
Try this alternative, which specifically targets the inside the link:

.navlink.navlink--toplevel[href="/collections/sales"] .navtext {
    color: red !important;
}

Final Steps:

  1. Add the CSS to your theme (Online Store → Themes → Customize → Edit Code → theme.css or base.css).
  2. Save the file.
  3. Hard Refresh the page (Ctrl + Shift + R on Windows or Cmd + Shift + R on Mac) to clear cache and see the update.

Thank you :blush:

10

New problem unlocked:

On the mobile, it doesn’t has the red color…

Any trick?

11

Give this a try.

/* Target SALES menu item on mobile */
.sliderow__title[href="/collections/sales"] {
  color: red !important;
}

/* Optional: Change color on hover */
.sliderow__title[href="/collections/sales"]:hover {
  color: #cc0000 !important;
}

Hope that helps.