[Support request] Is this correct to change font color for one solitary menu item?

[Henry]

Am I correct with my approach to change the font color of a single menu item?

I made the class “special”

Is this approach right for the menu item being in the main navigation?

@media (min-width:769px) {
    .main-navigation .main-nav ul li.special a {
        color: #FF9900;
    }
}

How about the hover attribute? How does that get added to the above CSS?

Thanks

[David]

Hi there,

looks correct to me. The hover event should happen on the LI so your hover selector would look like this:

.main-navigation .main-nav ul li.special:hover a

[Henry]

But what about to change color AND change hover if you see what I mean?

At the moment all links are white for example, I’d like for that one link to be a different color for “active” and then change color again for “hover”

Thanks

[David]

So this would be your CSS for changing the color and the hover color:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.special a {
        color: #FF9900;
    }
    .main-navigation .main-nav ul li.special:hover a {
        color: #FF0000;
    }
}

For the current menu item then you would apply the current-menu-item class

.main-navigation .main-nav ul li.special.current-menu-item a {
/* Styles here */
}

[Author]

Posts