Primary Menu Hover State

  • On the primary navigation menu, how do I remove the background colour from the hover state?
    So there is no background colour when you hover over the link. I just want the text colour to change from black to grey when you hover over the link.

    I’ve tried to change the following:

    .main-menu > li:hover > a {
    color: #757575;
    background: none;
    }

    The text colour changes, but the background hover colour remains. How do I remove it?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello there,

    Try this code: 

    
.main-menu > li:hover > a {
  color: #757575;
  background-color: transparent;
}

    Regards,
    Kharis

    Thread Starter claremc

    (@claremc)

    thanks for your help.
    But it still doesn’t work.

    I don’t think the class is
    .main-menu > li:hover > a
    but I can’t seem to find it.

    Hello there,

    Where did you apply that custom CSS? Be sure that a group of CSS where it be part of is error free. You can validate it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

    Perhaps your site is being cached by a plugin like W3 Total Cache? If so, you should delete the cache after adding some code. Otherwise, it won’t take affect on your site.

    Regards,
    Kharis

    Thread Starter claremc

    (@claremc)

    I’m applying the custom css to a child theme css stylesheet using a text editor.
    Its not caching, it still on my local computer.

    This works
    color: #757575;

    This doesn’t
    background-color: transparent;

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Primary Menu Hover State’ is closed to new replies.

Tags