Do you know how I can make “SALE” red for mobile phones too?
Topic summary
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:
- Target by URL/handle: .Header__MainNav a[href=“/collections/sale” or “/collections/sale-items”] { color: red; } for precision.
- Target by ID (if present): #navigation-sale { color: red; }.
- Affect all items (example): #AccessibleNav li a { color: red; }.
- Target by position (theme-specific): .site-nav li:nth-child(N) a { color: red; } and similar selectors for desktop/mobile variants (#SiteNav, #MobileNav), sometimes with !important. Other theme-specific selectors were provided for Debut, Prestige-based custom, and headers with “scrollheader” or “tt-desctop-menu”.
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.
Hello OakWoodWine,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
.mobile-nav>li:nth-child(2) a {
color: red;
}
Thank you!!
Thank you so much for youtìr help!!! i just saw that became orange also other parts of the sub menu ( i attach you a screenshot!)
What should i add in the code to have orange only HALLOWEEN in the main menu?
thanks again
@UmairA sorry to bother you and
Thank you so much for youtìr help!!! i just saw that became orange also other parts of the sub menu ( i attach you a screenshot!)
What should i add in the code to have orange only HALLOWEEN in the main menu?
thanks again
hello,can you help me?
I added this:
#MobileNav li:nth-child(2) a, #SiteNav li:nth-child(2) a { color: orange !important; font-weight: bold; }
But it changes also other items in the submenus.
How can i modifiy just to apply changes to “HALLOWEEN” in the main menu?
thanks a lot
Can you please help put “Sale” in red in both desktop and mobile
website link: www.boozeit.com.au
THANK YOuU
Hello Tim_Boozeit,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid
.tt-desctop-menu nav > ul > li:nth-child(3) a {
color: red;
}
.mmpanel.mmopened.mmcurrent > ul > li:nth-child(4) a {
color: red;
}
.site-nav a[href$=‘/collections/Sale’] {
color: red;
}
Can you please help me to put BLACK DAYS in the main menu for desktop and phone?
Thank you
Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
ul.site-nav li:nth-child(1) a {
color: red !important;
}
1 Like
@oscprofessional , Great, thanks for your help 
Hi. Im currently using the Debutify theme and it’s not working. Is there anywhere else I could paste this code
Hello, I need to do the same in my mega menu of the Trademark theme. I want “special offers” text in red.
https://www.gioielleriagagliardi.com/
Also on mobile.
Can you help me, please?
The CSS class for Debut theme’s navigation seems to be .site-nav, so paste the following code at the bottom of your theme.css.liquid under the Assets folder:
/* change a sale collection link to red */
.site-nav a[href="/collections/sale"]
{ color: red; }
Change “sale” to whatever you’ve named your sale collection. If it’s “Sale Items” your code would look like: .site-nav a[href=“/collections/sale-items”]
You can change the word “red” to any color hex code. If you want a maroon color, your code would look like this: { color: #800000; }
If you would like to bold your text, add this to your code: font-weight: 700;
So your code would ultimately look like this:
/* change a sale collection link to red */
.site-nav a[href="/collections/sale"]
{ color: #d9aaa7;
font-weight: 700;}
(I wanted my “Sale” tab to be my branded pink color and bolded so this is the exact code I used. I also used all uppercase letters in my Navigation Menu editor. Check it out on my site: https://pinealvisionjewelry.com/)
I would love to know how to add a different color on hover for just the sale tab. If anyone knows what I need to add to this to achieve that I would be grateful.
Play around with this code on a copy of your theme so you can make sure it works before you apply it to your live theme.
Hello Brittany,
As told my theme is not Debut but Trademark. And I use the mega menu option
included in that theme.
Hi!
Same here.. How can I change the ¡DESCUENTOS! section to red color? Mobile and web version.
Appreciate your help!!
Hi
I will be rebranding working on DEBUT theme and trying to make my SALE menu red. Codes written up worked for my old theme (minimal) however cant make it work on debut. Please help
password; Yaggie95100
Hi @jaesva ,
Please Accept the solution.
Hi @acoh ,
Send your store URL