Symmetry Theme: Change color of a navigation text item?

Store Design
, ,
1

Hey all. I’m sorry, I know there are other similar questions about this and I have tried them all with no luck.

I’m redesigning our Shopify store and there are some basic things I can’t seem to figure out.

This one, all I want to do is BOLD and RED the “Accessories Shop” menu item on the Home Page. I have seen custom CSS codes to add which I have tried but none have worked.

In my Edit Code > Assets section I have the following… See attached.

Screen Shot 2024-07-11 at 11.24.44 AM.png
Screen Shot 2024-07-11 at 11.24.44 AM.png604×1164 52 KB

Website is https://boutique.grandtouringautos.com

Any help would be greatly appreciated!

Screen Shot 2024-07-11 at 11.18.36 AM.png
Screen Shot 2024-07-11 at 11.18.36 AM.png1920×1662 590 KB

2

Hi @GTA_Autos ,

Please go to Actions > Edit code > Assets > styles.css file and paste this at the bottom of the file:

li.navigation__item:nth-child(3) {
    color: #ff0000;
    font-weight: 700;
}
1 Like
3

Hey @GTA_Autos

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1720712187741.png
Moeed_0-1720712187741.png1906×939 202 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4
  • Here is the solution for you @GTA_Autos
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the styles.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.navigation__tier-1 li.navigation__item:nth-child(3) {
 color: red !important;
font-weight: bold !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1720712179671.png
BSSTekLabs_0-1720712179671.png872×195 17.5 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
5

Thank you! This worked. Now if I also wanted to make that item ITALIC or, even better, just the first word “New!” can offer a solution for either or both?

Screen Shot 2024-07-11 at 11.45.45 AM.png
Screen Shot 2024-07-11 at 11.45.45 AM.png2556×2048 497 KB

6

Thank you Moeed. Unfortunately, I do not have a theme.liquid file in my Assets folder. I did try pasting your solution in my styles.css file but it did not work. Namphan’s solution above did work however.

7

Hi @GTA_Autos ,

Please change code:

li.navigation__item:nth-child(3) {
    color: #ff0000;
    font-weight: 700;
    font-style: italic;
}

As for the css for ‘New!’, you need to edit the liquid code again, do you want me to check it

1 Like
8

As for the css for ‘New!’, you need to edit the liquid code again, do you want me to check it

If it’s not too much trouble. I’d love to learn.

9

Hi @GTA_Autos ,

Can you send me the code of header.liquid? I will check it, or faster, I will send you a collaborator invitation, it will help me debug everything best and guide you

10

Hi @GTA_Autos ,

After changing the code of main-nav-links.liquid file, please change code CSS:

li.navigation__item:nth-child(3) .navigation__link span {
    color: #ff0000;
    font-weight: 700;
    font-style: italic;
}
1 Like