Hi! Anyone know how to customize the font color of a specific text in the header? Example (SALE). I want it to be in red, but my theme doesn’t allow me to edit code. Thanks in advance!
Topic summary
A user seeks to change the font color of a specific menu item (“SALE”) in their Shopify store header to red.
Solution Provided:
- Custom CSS code was shared to target the specific menu link and apply red color styling
- The code uses the selector
a[href="/pages/giftables-collection"]withcolor: red !important; - Code was refined to avoid affecting the announcement banner text that also contains “sale”
Current Status:
- The color change solution successfully implemented
- User now requesting additional help with adjusting font size in the header menu to reduce clutter
- Discussion remains open with the new font sizing question unanswered
Hi @happeee
Could you share your store URL so I can check and give you customize CSS code to do that?
url: pegai.com tia!
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
a[href="/pages/giftables-collection"] { color: red !important; }
Thanks for this! Is there any way to change the font color of sale without affecting the color of the announcement banner txt with sale on it too? Thanks.
Please update code to this
.site-nav__item a[href="/pages/giftables-collection"] { color: red !important; }
Thank you so much, this works! Can I also have a help in adjusting the font size of the txt in menu header because it so cluttered. How do I do that? TIA.