Change the color of a single main menu item

Store Design
, , , , , ,
1

Hello,

I need help for CSS coding on Studio Theme → I would like to change the text color of only one of my main navigation menu to highlight it.

The “Sale” navigation menu should appear in RED rather than black for both Mobile and Desktop

I tried to quibble with the code but nothing to do, the color does not change. I’m having trouble identifying my menu or placing my code incorrectly on my CSS stylesheet.

Website - https://tabeerhomes.com

Theme - Impact

2

Hi @Sauravb

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

a[href="/collections/sale"] { 
    color: red;
}

And Save.

Result:

Made4uoRibe_0-1714079795105.png
Made4uoRibe_0-1714079795105.png229×297 5.17 KB

Made4uoRibe_1-1714079804121.png
Made4uoRibe_1-1714079804121.png421×178 2.9 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you so much!

4

Hello, I am trying to do the same and change the color of my Swim Category to Pink. I was able to change the sale menu item on my website to red, but when i do the same with the swim dropdown menu it does not change it. My website is vixafashion.com.

Thanks

5

Hi @vixaclay

Check this one. Same instruction.

summary#HeaderMenu-swim {
    color: pink;
}

And save.

Result:

Made4uoRibe_0-1714418641872.png
Made4uoRibe_0-1714418641872.png577×261 52.8 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

That worked for desktop! Is there a way to make it pink for mobile as well?

7

Yep, sure. Same Instruction.

summary#HeaderDrawer-swim {
    color: pink;
}

And Save.

Result:

Made4uoRibe_0-1714581786204.png
Made4uoRibe_0-1714581786204.png429×174 2.75 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

Hi ! I am trying to do the same but it doesn’t work for me :

  • I don’t have base.css, style.css or theme.css files. Can it be main.css ?

  • The name of the main navigation tab I want in red is called “VENTES PRIVÉES”

Thank you !!

Laure

https://www.socque-paris.com/

Theme : Symmetry

9

Hi @lauregp

Thank you for reaching out it seem that you already solved the problem.

10

Hey Made4uo-Ribe trying to do the same on my webside, but want to put it BOLD and Red.

www.moreamor.cl
Theme: Flex

11

Hi @YiyoMizon

Thank you for reaching out, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header__menu-items label[for="mega-sale"] a, 
.mobile-menu__content label[for="mobile-submenu-sale"] a {
    color: red !important;
    font-weight: bold;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

12

i tried to copy it but it isnt working for me . could you help plz

website bonomar.com