Archived topic

Is this correct to change font color for one solitary menu item?

3 replies · Started by Henry on September 10, 2019

Viewing posts 1–4 of 4

September 10, 2019 at 4:15 am #1005573

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

September 10, 2019 at 5:39 am #1005656

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

September 10, 2019 at 6:49 am #1005710

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

September 10, 2019 at 7:54 am #1005862

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 */
}

This archived topic is closed to new replies.

Start building better websites today.