Change color of one link in Navigation menu

New Member
2 0 1

Hello,

I was wondering if anyone could show me how I can change the color of just one link in my navigation menu. I would like to change the color of the "Refer a friend" text but I don't know how/where to change CCS code.

http://shop.victoriakhoss.com/

Thank you for you help!

1 Like
Astronaut
1890 1 395

Open Assets/styles.scss.liquid.  Add the following to the end of the file.

nav.main a[href='http://bit.ly/1knhFk3'] {
    color: red;
}

I hope this helps.

0 Likes
New Member
2 0 1

Yes, it worked!! Thanks so much!

0 Likes
New Member
2 0 0

Hi there, I have the same question. I would like to change the color of SALE in my navigation to a different color. 

www.betweenten.com

Thank you!

0 Likes
Astronaut
1890 1 395

@Between Ten -- Add the following to the end of your CSS file (stylesheet.css).

ul#nav a[href$='/collections/sale'] {
    color: red;
}

I hope this helps.

0 Likes
Tourist
7 0 1

Hi I have the same issue. I want to change "Enter to Win" to Hot Pink

https://www.82and1.com/

 

Thanks!

0 Likes
Astronaut
1890 1 395

@Natalie Gagliano -- Add the following to the end of your CSS file (theme.scss.liquid).

.action-bar a[href*="/pages/giveaway"] { color: pink; }

 

0 Likes
Tourist
7 0 1

worked! thanks so much!

0 Likes
Tourist
4 0 1

Hi Alex

I want to change the color of the Menu Item "Sale" to red

 

https://www.hoss.com.au/

 

thanks in advance

Patrick

0 Likes
Astronaut
1890 1 395

@Pat Troy -- Try this:

.index .header .nav a[href*="/collections/winter-sale"] {
  color: red;
}
.index .header .nav a[href*="/collections/winter-sale"]:hover {
  color: yellow !important;
}
.index .header .nav a[href*="/collections/winter-sale"]:after {
  background-color: orange;
}

The first color is for the text in its normal state.  The second color is for when your cursor hovers over the text.  And the third color is for the underline that appears when your cursor hovers over the text.

0 Likes