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 </body> tag

<style>
nav.header__inline-menu {
    border-bottom: solid 2px white;
}
</style>

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 · Accepted solution]

---

@sweetchin23 wrote:

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?