Current Page Different Color in Nav


For example here is the page…

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?



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: )

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?