Trying to get one link on nav bar a different color.

[canadacatman1]

My nav bar links are a blue and i am trying to make one a different color to make it stand out. Can someone please help me.
Thanks

https://codepen.io/anon/pen/LdMPJg

[canadacatman1]

I got the link to be a different color using
.sponsor a{
color: #f0783d !important;
}

But now I need help setting the following code with .sponsor a
in it. Its hover underline and active.

.underlinemenu {
font-weight: bold !important;
width: 100% !important;
}

.underlinemenu ul {
margin: 0 !important;
padding: 0px 0 0px 0 !important;
text-align: righ !important;
}

.underlinemenu ul li {
display: inline !important;
}

.underlinemenu ul li a {
border-bottom: 6px solid transparent !important;
text-decoration: none !important;
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected {
border-bottom-color: #b3da41 !important;
}

.active {
border-bottom: 6px solid #b3da41;
color: #0350FF;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 15px;
font-weight: bold;
padding: 8px 0;
position: relative;
text-transform: uppercase;
}

[JeroenR]

You mean like this? https://codepen.io/anon/pen/VXqWoa
In this example I used a class on the list item to target the specific anchor.

You can also target the specific anchor by putting the href in the CSS selector.
For example:

li a[href="https://www.xxx.com/pages/support-us"] {
  color: green;
}

I notice you’re using the !important a lot. I would advice not do to so. Only when this is really necessary.

[Pogany]

Add class="active" to the one you want different. You already have a class .active in your css.

[Author]

Posts