How can I add a line to header links that changes color on different pages?

[sweetchin23]

hello, can anyone help me on how to achieve this?
I want to put a line on the links like that in the header and when in other pages it will turn to be black.

Thank you!

[Moeed]

Hey @sweetchin23

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[sweetchin23]

alright thank you

[Moeed]

Hey @sweetchin23

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:

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

Best Regards,
Moeed

[sweetchin23]

thank you, but can i extend the width until the icon?

[websensepro]

@sweetchin23

thank you, but can i extend the width until the icon?

nav.header__inline-menu:after {
    position: absolute;
    content: "";
    height: 2px;
    background-color: white;
    width: 79%;
    top: 71%;
    left: 19%;
}

[sweetchin23]

Oh wow! Thank you! It is perfect, but I also have another question, is it possible to make it black when I change to another page? Like this? Thank you so much!

[websensepro]

Yes it possible

If this solution worked for you, please mark it as resolved.

[sweetchin23]

Thank you, i will just put it in my theme.liquid and make it !=index right?