Goal: change a single menu item (e.g., SALE) to red, optionally both in the main header and in dropdowns; also questions on coloring sub-menu items.
Core approach: add custom CSS targeting the specific link or menu position, appended at the bottom of the theme stylesheet (Online Store → Theme → Edit code → Assets → theme.scss.liquid / theme.css.liquid / theme-styles.scss.css.liquid, depending on theme).
Key solutions:
Outcomes: several users confirmed desktop success; mobile needed separate selectors. Users also asked where to place CSS; guidance was provided.
Status: ongoing. New requests (e.g., Warehouse theme “special offers”, lejean.com) remained unresolved in the thread.
I’ve been trying to figure out how to change the text color of one link at the top of my menu bar. I’ve been searching old threads to no avail, as my theme is a custom prestige based theme.
I’m trying to edit a link at the top called " SALE" Into red text color, can anyone help?
Add below code in the theme.liquid file. Also, you can set your background color and text color in below style.
<style>
#section-announcement {
background: #000 !important;
color: #f40505 !important;
}
</style>
Does the
Does the above answer your question? I’m reading this as you wanting to change a single word but the above is about change the background colour of the announcement bar. If you are talking about a specific/word link can you give some details about where that is? You have a simple menu at the moment but I don’t see a specific “sale” link.
Jason, yes that is what I’m trying to do, I’m actually trying to determine whether to create a SALE button on the main header or under the Store menu dropdown. I’d like to have the option to turn either of them red. For the time being, i’ve added a button to the top menu.
I’d also like to be able to know how to change the colors for the sub menu items under store, like jewelry, bath towels etc.
I don’t see the sale button but let’s just use any item in your menu. If you are ok with editing some CSS in your take a look at the code below:
/* change rug-medium menu item to red */
.Header__MainNav a[href="/collections/rugs/medium"] {
color: red;
}
It should be easy enough to follow. It’s going to target any link in your main header navigation, with a url of “/collections/rugs/medium”, and turn it red.
If your sale collection is “/collections/sale” you’d change the code to:
/* change a sale collection link to red */
.Header__MainNav a[href="/collections/sale"] {
color: red;
}
See how you go with that and post back if you get stuck.
Edit. I can see you have a link there now for “/collections/sale-items”. Just use the same idea as above for that handle.
Great! May I ask where I would be appending this code to? I’ve tried adding it at the bottom of the theme.liquid code but to no avail.
It’s CSS code, you need to put it at the bottom of your theme.scss.liquid file.
This worked for me, but how do I have it show up on the mobile drawer? Thank you!
The CSS class for Minimal theme seems to be in .site-header. Here is the tweaked code snippet.
As Jason has mentioned place it bottom of theme.scss.liquid layout file
/* change a sale collection link to red */
.site-header a[href="/collections/sale"]
{ color: red; }
Hi Jason, we are using Grid theme and we wanted to bold the SALE in our main menu, may i know the code on this? Thank you
Our website www.houseofjay.com
Hello houseofjay,
#navigation-sale {
font-weight: 700;
}
Thank you so much. How about if i want to change the color?
#navigation-sale {
color: red;
}
Note: Change color as per your requirement
If my solution helpful to you then please like and accept it
Thank you so much..
Hi! I’m trying to change the color for a menu item, I did try to paste the code but it didn’t work. I’m using a Brooklyn theme. I appreciate your help!
Add below css to theme.scss
This css will change the color of all menu item
#AccessibleNav li a {
color: red;
}
Note:Please change the color as per your requirement
Hi,
I am trying to change the word SALE to red. I did the compare price, so I compared the price I had before to the sale one. However is in grey colour and I would like it in red,
someone can help me?
thank you
Adela
Hello @givemecocos ,
.price__sale .price-item__label {
color: red;
}
Hi @Brashid91 ,
Please add this code to the very bottom of your theme.scss file:
.price__sale .price-item__label {
color: red;
}
Thanks,
Brad @ BestEver Digital