Current Page Different Color in Nav

HTML & CSS
1

Hello,

For example here is the page…

http://fuzzypanda.ca/bary/products/

I would like Products in the Primary Navigation to be orange.

I put this into my CSS but it did not work…

.current-menu-item a {
color: #f26122;
}

Anyone see what I’m doing wrong?

Thanks,

Mike

2

When I look at your style.css, I see that the color of the items in that menu are being set by:

styles.css (line 197)


.navtwo li a {
    color: #3E3E3E;
    display: block;
    font-weight: 400;
    height: 70px;
    line-height: 70px;
    margin-right: 15px;
    padding-right: 15px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

To change that style, we would need to add a style of equal specificity that falls later in the CSS or a style of greater specificity.
(Do you understand “specificity”? If not, please read: http://reference.sitepoint.com/css/specificity )

To accomplish that, we will change the color with this:


.navtwo li.current-menu-item a {
    color: #f26122;
}

This has greater specificity and falls later in the CSS, too.

Do you understand how/why this works?