How to change the color of WordPress navigation on hover

how to change link hover color in wordpress
how to change menu hover color in wordpress
how to change active menu color in wordpress
how to change menu color in wordpress
wordpress change navigation menu color
how to change menu font in wordpress
change menu text colour wordpress
how to change menu link colors in wordpress

I am developing a website using a thrive theme on WordPress. I am trying to change the on hover color on the blog page specifically because it's built differently from the other pages.

Presently on hover it goes white from black which isn't what I am trying to achieve.

I searched online and saw some articles and code snippets which have brought me to trying this

header nav ul li a : hover {
    font-family: 'Open Sans', sans-serif;
    color: #000;
    display: block;
    font-weight: lighter;
    font-size: 14px;
    text-transform: capitalize;
    position: relative;
}

header nav > ul.menu > li > a : hover {
    color: #373737;
    font-weight: lighter;
}

I have applied : hover to the navigation element to try to change the color on hover, but it doesn't work.

Is there anything I am doing wrong here? The site is at

http://stefanjames.com/blog/

You need to remove the spaces around the pseudoclass : selector in your CSS, so that it reads:

header nav > ul.menu > li > a:hover

How to change color of the nav menu hover, and , If you change your menu hover color then you log in your wordpress admin panel - click Appearance - Customize - menus, and you change everythig on your  Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen. You need to click on the blue icon at the top to start editing. After you click the blue icon, take your mouse to your navigation menu, and CSS Hero will highlight it by showing the borders around it.

Your syntax wasn't perfect. There should be no spaces between your : and the pseudo selector property.

header nav > ul.menu > li > a : hover

should become

header nav > ul.menu > li > a:hover

I had a look at the site, you would need the following added to your CSS file:

header nav > ul.menu > li > a:hover {
  color: #373737;
  font-weight: lighter;
}

How does change menu hover color in WordPress?, Up next. WordPress:-Changing the Color of Navigation Bar / MenuBar - Duration: 11:47 Duration: 0:54 Posted: Jun 13, 2019 WordPress automatically adds the current-menu-item class to the link in this state, which you can use in Custom CSS to apply a different color etc. To view this class, right-click the link while viewing its page, and choose Inspect Element to open the browser inspector .

.main-navigation ul li a:hover{color:red;}

Bizberg WordPress Theme : Change Menu Hover Color, Wordpress: How to change the font and hover color of your title and size as well as the Duration: 8:23 Posted: Feb 4, 2014

Wordpress: How to change the font and hover color of your title , You need to remove the spaces around the pseudoclass : selector in your CSS, so that it reads: header nav > ul.menu > li > a:hover.

How to change the color of WordPress navigation on hover, If you just want to change the overall color or style of the nav menu, refer to How link to use the hover color, so there is no change on hover when on this page, 

How to Customize WordPress Menu Links Color or Style, Adding Hover Effects to WordPress Navigation Menus. Do you want your menu items to change colors on mouse-over? This particular CSS trick 

Comments
  • really omg, i ws almost going crazy, thanks give sm minutes i will like ur reply
  • Can you add more detail to your answer, please? That would make it easier to understand your solution. Thanks! :)