CSS to change Header Menu Text Color - Debut Theme

Store Design
1

Can someone help me with the CSS to change the header menu text color? I have done an inspect on the menu and have located the class and ID, but not sure how to form the correct CSS. Have attached a screenshot of the inspect results.

Class is “site-nav list–inline site-nav–centered” and ID is “SiteNav”.

I assume that I put the CSS at the end of theme.css?

2

@LanceAllison

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thanks. The site is;

https://scenties-store.myshopify.com/

and the password is “lance”

1 Like
4

@LanceAllison

try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css or theme.scss ->paste below code at the bottom of the file.
.site-nav__label {color: #0294c9;}
.site-nav__link--active .site-nav__label {border-bottom-color: #0294c9;}
5

Hello Ketan,

I want to alter just one word in the navbar. For instance, I only want to change one of the five options in the navbar in order to highlight it. Is that possible?

Here is the link for the theme I’m using, Motion: https://themes.shopify.com/themes/motion/styles/classic?architecture%5B%5D=os2&reviews_page=2&surface_detail=motion&surface_inter_position=1&surface_intra_position=1&surface_type=search#Reviews

1 Like
6

@Aphelion

please share your store url

1 Like
7

@KetanKumar thank you for your reply.

here you go: https://lb.mikesport.com/

1 Like
8

Thanks can you please let me know which signal work nav color change

1 Like
9

The fitness equipment will be first removed from the navbar before New Arrival is added. and the new arrival is what I want to highlight.

I want to give it an orange highlight, or perhaps we can make the text orange.

I’m not exactly sure what we can do, but all I want is for it to be highlighted in the navbar.

1 Like
10

@Aphelion

yes, please update navbar so i will give you proper code

1 Like
11

@KetanKumar Okay done now. Please check it

1 Like
12

@Aphelion

great Thanks please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.site-nav__link[href="/collections/new-in"] { color: #ec6c31;}
1 Like
13

@KetanKumar

It didn’t work when I tried it. any other options?

14

@KetanKumar Are you still available to assist?

1 Like
15

@Aphelion

sorry i can’t see code where did you added this?

16

@KetanKumar I added the code to the bottom of the file theme.css.liquid.

1 Like
17

yes but you have add wrong place

can you move code like this

KetanKumar_0-1656315283308.png
KetanKumar_0-1656315283308.png1920×1080 498 KB

1 Like
18

@KetanKumar Thank you, it’s working now on a desktop computer, but not on a phone.

1 Like
19

@Aphelion

yes, please add this code also

.mobile-nav__link[href="/collections/new-in"] {color: #ec6c31  !important;}
1 Like
20

@KetanKumar Thank you a lot. I do have one more query. Possibly adding a border. for instance, what if the border was orange and the text inside was white. is it doable?

1 Like