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
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 
@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
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
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:
-
Uses an attribute selector [href=“/collections/sales”] to target the specific menu item
-
Targets the text element with class .navtext
-
!important ensures it overrides existing styles
-
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
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
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!!
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:
- Add the CSS to your theme (Online Store → Themes → Customize → Edit Code → theme.css or base.css).
- Save the file.
- Hard Refresh the page (Ctrl + Shift + R on Windows or Cmd + Shift + R on Mac) to clear cache and see the update.
Thank you 
New problem unlocked:
On the mobile, it doesn’t has the red color…
Any trick?
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.