Change color of one link in Navigation menu

Tourist
4 0 1

WOW!!!

that is above and beyond.

 

thank you Alex

 

:)

 

1 Like
New Member
1 0 0

Please help me change the color here prosheepdogs.com

Thank you 

0 Likes
Shopify Expert
9765 86 1517

Yuri - The concept is the same but since you're theme is different you need to adapt it to your needs. Something like this should help get your started.

#header .navbar .nav > li > a[href$='/collections/sale'] {
    color: #d60b0b;
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
2 0 0

Hello guys, 

i also want to fix the issue formatting different menue items in different colors. In this case is just want to change our "Sale %" menu item to red.

https://www.penoblo.de

Im looking forward to get an answer. Thank you

0 Likes
Shopify Partner
42 0 8

Hi Kian-David,

If the Sale link will always be the last on your menu, it's easy enough to do something like this:

.site-nav > li:last-of-type > a {
    color: red;
}

Thanks,
Joe

Web developer based in the UK, specialising in Shopify.
0 Likes
New Member
3 0 0

Hi, I'm trying to change the colour of 'SALE' to red on the main menu of my website. I've tried some of the codes above but none seem to work - 

www.flyingdodoclothing.com

theme - ditsrict

Many Thanks

Laurie

0 Likes
Highlighted
Astronaut
1890 0 385

@Laurie -- Try adding the following to your CSS file (Assets/district.scss)

// Red sale links in desktop menu bar
header.site-header nav.nav-bar ul.site-nav li a[href*="sale"] {
  color: red;
}

// Red sale links in mobile menu bar
#menu.panel ul.site-nav li a[href*="sale"] {
  color: red;
}

 

0 Likes
New Member
3 0 0

Thanks Alex,

I've pasted the code into the bottom of the CSS file but nothing has changed :(

Is there anything I need to change in the code in order to get it to work with my site?

Many Thanks

Laurie

0 Likes
New Member
1 0 0

I am also trying to do this and have tried some of the codes above and can't seem to get it to work.  I would like the word SALE to be red. 

www.iodogs.com

Theme - Responsive 

Any help is appreciated.  

0 Likes
Astronaut
1890 0 385

@Laurie -- Sorry, I did not comment the code properly.  Try this:

/* Red sale links in desktop menu bar */
header.site-header nav.nav-bar ul.site-nav li a[href*="sale"] {
  color: red;
}

/* Red sale links in mobile menu bar */
#menu.panel ul.site-nav li a[href*="sale"] {
  color: red;
}

 

@Andrea Naber -- It looks like you have a solution in place.  Note that it will target every eighth item, which isn't 100% ideal.  (If you add/remove an item from the menu, or change the position of the Sale link, you will need to adjust the CSS again.)  If you're willing to make a small change, I suggest:

/* Red sale links in desktop menu bar */
#nav ul li a[href*='/collections/sale'] {
  color: red;
}

/* Red sale links in mobile menu bar */
#mobile_nav ul li a[href*='/collections/sale'] {
  color: red;
}

 

1 Like