Main navigation menu hover refuses to change

HELLO Wpmudev I am needing CSS support. When I try to change the hover link color nothing happens. I have tried this code but nothing happens: `ul#menu-app-main.nav-menu:hover {

background-color: yellow;

}` Please assist. The link is here.

  • Schmirts
    • Site Builder, Child of Zeus

    Hello again Vaughan , I tried something else just now. I added the following code: `#site-navigation a:hover {

    background-color: yellow !important;

    }` this didn't work when I added it using "simple custom css" plugin, but when I also add it to theme stylesheet it worked! Why did it not work in custom css plugin? Should I always use theme stylesheet? Also please if you could help me extend the hover background to cover entire height of header like this:

    NOT like this (how it is now):

    Thank you in anticipation

  • Vaughan
    • Support/SLS MockingJay

    Hi Schmirtz,

    The custom CSS plugin might be loading after your nav menu has been rendered, or have different priority.

    Can you try the following CSS;

    #masthead_TesseractTheme {
    padding-top: 0;
    padding-bottom: 0;
    }
    .top-navigation ul li a {
    line-height: 68px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    }
    .top-navigation ul li {
    height: 100%;
    line-height: 68px;
    }

    Edited code above.

    It might not work entirely, as it looks like you have added CSS already in your theme that uses !important, so this might not override that until you remove the !important.

    Hope this helps

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.