Before you ask please READ THIS

Nav Menu Item in Different Colour

in Rife Posts: 87

Please can you help

I cant see how to set the nav menu item active colour to be different from the hover link

e.g, I want orange as the link colour but a different colour as the active menu item font colour -

See dev site - active and the link colour are both orange - and I need to change the active hover menu item font colour to not be orange



  • AirAir
    Posts: 9,797
    Hey :-)

    You have set it good - it is orange on hover and active.
    However, none of your links in the main menu is the current page :-)

    With kind regards.
  • AirAir
    Posts: 9,797
    Maybe I don't understand what you mean by "active". However, for me normal link is now black, and orange on hover/active.

  • Posts: 87
    Hi - I mean that the active menu item font colour should NOT be the same as the link hover colour - so now I have orange for link hover and orange for active menu item that I am on

    As I am using an orange background you cant see the active nav menu item - I need to change the font color to be different from the active link

    See Screenshot - both are orange - how do i change the nav menu item font colour on active only to be different from the underline link - see the login menu item
    Screenshot 2019-01-10 12.27.16.png
    1920 x 1080 - 185K
  • AirAir
    Posts: 9,797
    OK :-)

    In theme, one color is used for both states. We didn't want to multiply options even more, as it already too many of them:-)

    For your current menu structure this should work: Please use this custom CSS:
    .top-menu > li.current-menu-item > a{
        color: red;
    .top-menu.with-effect > li.current-menu-item > a span::before{
        background-color: red;
    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion