Jump to content


Photo

Hover menu and active menu colors


  • Please log in to reply
4 replies to this topic

#1 patrryk22

patrryk22

    Advanced Member

  • Members
  • PipPipPip
  • 80 posts

Posted 10 May 2011 - 09:37 PM

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"Posted Image

#2 patrryk22

patrryk22

    Advanced Member

  • Members
  • PipPipPip
  • 80 posts

Posted 10 May 2011 - 09:44 PM

is ??

#3 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 May 2011 - 02:59 AM

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;}


#4 jonthompson

jonthompson

    Super Member

  • Members
  • 100 posts
  • Country: Country Flag

Posted 10 July 2013 - 10:42 PM

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. 


#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 July 2013 - 11:36 PM

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...imple-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;
}