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

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

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1005573
    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

    #1005656
    David
    Staff
    Customer Support

    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

    #1005710
    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

    #1005862
    David
    Staff
    Customer Support

    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 */
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.