Buenos días
Estoy preparando mis ofertas flash y me gustaría saber como cambio la palabra ofertas a otro color que resalte en mi menú, en menú principal
Mi página web es www.nailcy.com
Muchas gracias
Muchisimas gracias
A Shopify store owner wants to change the color of a specific word (“Ofertas” / “Offers”) in their navigation menu to make it stand out.
Initial Solution:
A CSS code snippet was provided targeting menu items, but it changed the color of all navigation links instead of just the desired word.
Working Solution:
The issue was resolved using CSS nth-child selectors to target the specific menu position:
header ul.list-menu.list-menu--inline li:nth-child(3) a { color: red; }Follow-up Issue:
Another user implemented the same solution but encountered an unintended side effect—the code also changed the color of a collection name (“Arcane collection”) that they wanted to keep in the original color. This issue remains unresolved in the thread.
Key Technical Detail:
The solution requires adding CSS code to Online Store > Theme > Edit code > Assets > base.css at the bottom of the file.
Buenos días
Estoy preparando mis ofertas flash y me gustaría saber como cambio la palabra ofertas a otro color que resalte en mi menú, en menú principal
Mi página web es www.nailcy.com
Muchas gracias
Muchisimas gracias
Hello @JennyferChen
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
a.header__menu-item.header__menu-item--top.list-menu__item.focus-inset {
color: red !important;
}
Thank you so much, It works but changes all the navigation bar, I want the word Ofertas Flash, how can I do this?
Hello @JennyferChen
Please look at the below I have added the code for you.
Thank you so much for your fast reply @oscprofessional I cannot copy the code, I think it is not attached. ![]()
yes, apologize for this It will update you after some time.
Hello @JennyferChen
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
header ul.list-menu.list-menu--inline li:nth-child(3) a {
color: red;
}
OMG, It works! Thanks so much!!! ![]()
@oscprofessional How can I make it appear in mobile version too?
Hello @JennyferChen
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
@media screen and (max-width: 768px){
header .menu-drawer__menu.list-menu li:nth-child(3) a {
color: red;
}
}
It works!!! Thank you so much again. So kind ![]()
Hello @JennyferChen
Appreciate helping you, let me know if any issues there.
Hello !
I did the same, but it change the colour of one collection too, and I don’t want it.
I don’t want change colour in “Arcane collection”. What can I do?
I used these:
header ul.list-menu.list-menu--inline li:nth-child(1) a {
color: #db8840;
font-weight: bold;
}
@media screen and (max-width: 768px){
header .menu-drawer__menu.list-menu li:nth-child(1) a {
color: #db8840;
font-weight: bold;
}
}
Thank you !!!