Change hover effect for nav menu item

Hey There !
I am using sydney theme for my website. I have put border around the nav menu items. And it looks like this.
http://bizacademy.in/wp-content/uploads/2017/05/Screenshot-from-2017-05-11-10-15-51.png
The problem is, hover effect only work for the text of menu item. I want the hover effect for entire box of item. but instead only the text gets highlighted on hover. How can I change it so that entire item box gets highlighted on hover. The hover color should be red.

Hello @ashknight68,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#mainnav .menu > li:hover {
    border-color: #d65050;
    transition-duration: 0.5s;
}

Also you might want to add transition duration to your current custom CSS rule (Simple Custom CSS plugin, row 13-15) so border hover color will not change immediately on mouse out event:

#mainnav .menu > li {
    border: 1px solid #000000;
}

…you can change it like this:

#mainnav .menu > li {
    border: 1px solid #000000;
    transition-duration: 0.5s;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you for your reply.
The code you gave only highlighted the box border and not the entire box.
I want that whole box should be highlighted on hover. can you make that happen ?

I did it by myself. Thank you anyway. :slight_smile:

Great, you are welcome @ashknight68! And have a nice day :slight_smile:

Kind Regards, Roman.