Shopify themes, liquid, logos, and UX
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
@Brashid91 wrote: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?
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 Ranga,
I also would like to change text color of one specific menu item. Menu item and collections is called "sample sale".
I have implemented the code and changed the collection name but it does not work. Also put the code bottom of theme.scss.
Could you please help me out?
Thanks!
Best regards,
Omar
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
Hello houseofjay,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
#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
@houseofjay wrote:Thank you so much. How about if i want to change the color?
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
this completely messed up our website!!! how do we go back now? i've deleted this line of code but it won't change back to normal, images are all over the place, some text red some is gone completeley!!
Can you please share your site url
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
@houseofjay wrote:Our website www.houseofjay.com
Adela
Hello @givemecocos,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file
.price__sale .price-item__label { color: red; }
Hi,
thank you! it works, now the word SALE is in red, however the price on sale still black. There is any way I can put that in red as well?
thank you
Add below css
.price--on-sale .price__sale { color: red; }
Hi there,
I paste
/* change a sale collection link to red */
.Header__MainNav a[href="/collections/sale"] {
color: red;
}
It didn't work for me. The color of SALE on menu bar of home page is still black...
Hi, can you please tell me how can I change the "SWIMWEAR" on menu to red color on my site www.tapshe.com? I use Ella theme bought on themeforest Thank you so much.
Yi
Hello nan_li1,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme-styles.scss.css.liquid
.site-nav li:nth-child(6) a {
color: red;
}
Hi, can you please tell me how can I change the "HALLOWEEN" on menu to orange color on my site www.bonbonverona.it? I use Debut theme! Thank you so much!!!
my theme is "debut", can you advise how to change "sale" to red color. My store link is :
Hello, @oscprofessional
I have mine in "supply" and need to change the "SHOP" in main menu to red. Can you please tell me how?
Also I think I broke the code before and I have an "A" in my promo banner at top, do you know how to remove?
my site obarrel.com
Thank you!!
Hello OakWoodWine,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
.site-nav>li:nth-child(2) a {
color: red;
}
Thank you it worked @oscprofessional
Do you know how to remove that "A" I have at the top left of the screen?
obarrel.com
Thank you again
Hi @OakWoodWine ,
Go to Edit theme code > Layouts > theme.liquid file.
Search for <body> tag (Use Ctrl + F)
3-6 lines below the <body> tag you'll see the Alphabet "A", just remove it and save the file.
Do you know how I can make "SALE" red for mobile phones too?
obarrel.com
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;
}
Hi, can you please tell me how can I change the "HALLOWEEN" on menu to orange color on my site www.bonbonverona.it? I use Debut theme! Thank you so much!!!
Hi @bonbonverona ,
I can't see the "HALLOWEEN" on your menu? Can you please confirm?
Hello, thanks for your reply!
HALLOWEEN it's the second after BRAND, I attach you the screenshot!
thank you again
The link you share in the first post is going to some other store. Anyways, Here is the solution
#SiteNav li:nth-child(2) a {
color: orange !important;
}
Add the above code to your theme.scss.liquid file.
Best of luck with your startup!
thank you so much sorry for the wrong link, it worked in the desktop version but not mobile, how can I do?
the correct one is www.bonbonverona.it
thanks so so much
Add this code instead of the previous one,
#MobileNav li:nth-child(2) a, #SiteNav li:nth-child(2) a {
color: orange !important;
}
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
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?
Hi @brumisrl ,
I saw special price in your mega menu ?
Hi, I know I am quite late to this thread. The coding worked perfect on laptop, how do I get my mobile header to also be in red for the sale collection?
Kind regards,
Elliot
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
Hi!
Same here.. How can I change the ¡DESCUENTOS! section to red color? Mobile and web version.
Appreciate your help!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024