Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 10, 2018 at 8:47 pm #954870
    ikoadn

    If I wanted users to have a different hover color for a single menu item, how could I achieve that?

    The rest of the menu items could remain the default color, but if for instance I wanted the ‘Donate’ menu hover color to be purple what could I do?

    Thanks!

    May 11, 2018 at 4:07 am #954981
    Mike

    Hey ikoadn,
    If you add a custom class to the menu item, you can then assign a hover color with css.
    To add to custom class, go to your menu and at the top of the page click “screen options” then choose “CSS classes”
    Then you will have a “css classes” box in each menu item.
    Add a unique class such as “colorp” and save.
    Then add this code in the General Styling > Quick CSS field:

    .colorp:hover {
background: purple !important;
}

    Best regards,
    Mike

    May 11, 2018 at 5:53 pm #955380
    ikoadn

    Awesome, thanks for the help!
    I tried this out and it’s halfway there — it flashes purple but then resumes the fade to the theme color.
    Unfortunately, I’m not having luck in decoding the CSS when inspecting the page code.

    May 12, 2018 at 1:20 pm #955733
    Mike

    Hi,
    Please try:

    .colorp:hover,.colorp a:hover {
background: purple !important;
}

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.