Cambiar de color palabra en mi Menu CSS Change word color in my navigation bar Menu CSS

Topic summary

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:

  • Desktop: header ul.list-menu.list-menu--inline li:nth-child(3) a { color: red; }
  • Mobile: Media query targeting the same element with max-width 768px

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.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

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; 
}
1 Like

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.

1 Like

Thank you so much for your fast reply @oscprofessional I cannot copy the code, I think it is not attached. :slightly_smiling_face:

yes, apologize for this It will update you after some time.

1 Like

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;
}
1 Like

OMG, It works! Thanks so much!!! :growing_heart:

1 Like

@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;
}
}
1 Like

It works!!! Thank you so much again. So kind :two_hearts:

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 !!!