How to change hover's color on main menu

  • Hi guys,
    I’m trying to change color of the :hover selector of the primary menu. Now when you mouse over it, it’s dark grey, but I’d like to change it in a lighter color or in a different one, more consistent with the rest of my website.
    I’ve tried to modify this part of css code:

    #site-navigation li:hover > a {
    background: rgba (0,0,0,0.6) none repeat scroll 0 0;
    color: white;
    transition: all 0.4s ease 0s;
    }

    but it still doesn’t work, color remains the same despite several attempts. What am I doing wrong?
    Thank you for help

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

  • Did you clear browser cache after making changes?

    Did you put that code in after theme’s stylesheet files?, the changes in CSS must be loaded after the default ones, so make sure to have all the changes in CSS via child theme stylesheet or theme’s Custom CSS option if provided, or in a Custom CSS plugin.

    /* top level */
#site-navigation li:hover > a {
	background-color: rgba(255, 0, 0, 0.5);
	color: blue;
}

/* sub level */
#site-navigation ul ul {
	background-color: rgba(0, 255, 0, 0.5);
}

#site-navigation ul ul li:hover > a {
	background-color: rgba(0, 0, 255, 0.5);
	color: pink !important;
}
    Thread Starter iarm88

    (@iarm88)

    Yes, I cleared cache, I think probably it’s a problem of CSS code.
    I’m using the Custom CSS option provided by Fifteen theme, but maybe I’m forgetting something, I’ll try to follow your advice.
    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change hover's color on main menu’ is closed to new replies.