Change Mobile navigation color for Symmetry theme

Store Design
1

Hi All,

In the Symmetry theme, I would like to change the color of the mobile navigation text in the navigation drawer. By default, the text is black, but I want to make the “Sale” header red using custom CSS. I was able to achieve this for the desktop view, but I’m having trouble getting it to work for the mobile view. How can I adjust the CSS to specifically target the “Sale” link in the mobile navigation?

Lars_Veldman_0-1726860881870.png
Lars_Veldman_0-1726860881870.png3386×564 186 KB

Lars_Veldman_2-1726860983613.png
Lars_Veldman_2-1726860983613.png796×1218 58.5 KB

2 Likes
2

Hi @Lars_Veldman

Would you mind sharing your store URL? Thanks!

3

Hi,

The url is: refined-melbourne.com

4

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.navigation__item a[href="/collections/spring-sale"] {
    color: red;
}

And Save.

Result:

Made4uoRibe_0-1726863704834.png
Made4uoRibe_0-1726863704834.png540×615 4.83 KB

You also have some code, but it needs to be edit. If you know where this code is, you can simply edit it. This file is located in the theme.liquid.

You have this code.

Made4uoRibe_1-1726863855009.png

Now you can replace on this or edit it.

.navigation__link[href="/collections/spring-sale"] {
    color: red;
}

And Save.

This will show both mobile and dekstop.

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

1 Like