How to add background, hover colour to menu items

[newedgemarketing]

Currently my header is white with black text with a hover color on the text

I want to change it so that the background block has a hover color and the active page also has a different color, similar to what I've mocked up in the image shown in the link below:

http://www.newedgemarketing.co.uk/wp-content/uploads/2015/09/HOME.png

Anyone know how i can do this?

http://www.newedgemarketing.co.uk/

[Victor Font]

Look for code like this in your theme's style.css:

.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .sub-menu .current-menu-item > a:hover {
	color: #ed702b;
}

Add the background color here. There may be other css you may have to change as well, but it will look similar to the above.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[newedgemarketing]

Thanks Victor I've found it and change the active menu background colour to the dark blue i want #0971c1 however this bit of css seems to be controlling both the active menu and hover so they are both the same colour and i want the hover background colour to be a light blue #71AFDF, any idea how i do that i literally have no idea?

Current CSS:
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .sub-menu .current-menu-item > a:hover {
color: #ed702b;
background-color: #0971C1;
}

[Author]

Posts