Create rollover CSS to Navigation?

You need to post a link to your site for CSS questions. AND you must be using custom CSS plugin or a child theme.

No Problem..I’m using a child of Buttercream. Only just started..In a sub HERE

All I want is the links at the bottom to rollover green, but didn’t know I’d need custom CSS!

(Its a bit of a bombsite at the mo, only just in it’s infancy ??

Ta muchly

Andy

#header-menu li.menu-item a:hover {
	color: green;
}

You’ll need to replace green with the hex value for the actual color green you want to use.

Edit: If you want the sidebar menu to hover green as well you can use

#nav_menu-2 a:hover {
	color: green;
}

for that.

Thanks for your speedy answer!!

One more point though, I put this in the custom css box in theme options, and nothing has happened. where in the stylesheet would I put this?

Thanks lots ??

Andy

You should just be able to add this to the bottom of your css file.

#header-menu li.menu-item a:hover {
	color: green;
}
aside.widget ul li a:hover {
	color: green;
}

I tried this and it still hasn’t worked ??

Thanks for replying though

A

You’re missing a closing bracket between those two:

#header-menu li.menu-item a:hover {
	color: #05F475;
#nav_menu-2 a:hover {
	color: green;
}

Aghhhh..Now this is really confusing me and yet I KNOW it is so simple.. I can’t seem to make it work at all.

Thanks for pointing out the missing bracket…But still nada

*scratches head*

You’re still missing a bracket, but there’s another missing piece which is that you have a span tag in there – so try this:

#header-menu li.menu-item a:hover span {
	color: #05F475;
}

I’m really grateful for you helping me out..

Still nothing.

Thanks though

You’ve left your #main open. The bottom of your stylesheet should look like this. Of course keeping #sidebar as is.

#main
{
	background:#FFF;
}
#header-menu li.menu-item a:hover {
	color: #05F475;
}
#nav_menu-2 a:hover {
	color: #05F475;
}

Something isn’t working on your end – this is the CSS showing up on your site still:

#header-menu li.menu-item a:hover {
	color: #05F475;
#nav_menu-2 a:hover {
	color: green;
}

Make sure you are saving changes and clearing any caching plugins. Where are you putting this CSS?

Egruza has cracked it. Thank you so much..

On closer inspection I got the colour code a bit wrong too (bit too bright, but that’s the last of my worry)

Thank you all so much

A

Make it this – only the first one seems to have a span tag:

#header-menu li.menu-item a:hover span {
	color: #05F475;
}

#header-menu li.menu-item a:hover {
	color: #05F475 !important;
}