Jump to content
Sign in to follow this  
patrryk22

Hover menu and active menu colors

Recommended Posts

patrryk22    0
patrryk22

hi id like to change main menu colors when it hovers and when it is active. to look like this on the picture tell me how to do it ? on the picture acive menu is home and hover is "o nas"mainmenu.jpg

Share this post


Link to post
Share on other sites
catrina    103
catrina

Add this CSS code to your custom CSS area or the base.css file in the child theme:

ul.main-nav li.page_item a {color: #fff; background-color: #00A9E7;}
	ul.main-nav li.page_item a:hover {color: #000; background-color: ##F2F2F2;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jonthompson    1
jonthompson

It looks like you are using the brand nav section. like I am: http://serosunlifestyle.com/

 

here is what I ended up doing:

 

li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item. a {
  color: #ffffff;
  background-color: #466f4c;
}
 
I repeated it with the :hover (so it looks the same as the active item) but didn't get it quite right yet. I will update you when I find it. 

Share this post


Link to post
Share on other sites
James B    436
James B

Hey John

 

Those posts are from 2011 so I don't think the original posters are following still. However, if you're using the brandnav you can use the simple css lite plugin to set the colors for the active/hover instead of doing it manually with css.

 

http://www.pagelines.com/store/plugins/simple-css-lite/

 

To change the color with css on hover on the site you linked the following should work.

 

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
    background-color#466f4c;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×