Jump to content
Sign in to follow this  
lisaren

CSS on menu - hover and current page mark

Recommended Posts

lisaren

I need a more experienced CSS eye on my CSS! What I am trying to accomplish: Dark Green background on my menu with white text When you hover over a menu item I would like the white text to become yellow Here is my css:

/*Navigation background color full width of layout*/
	#nav .content-pad { background-color: #353d33!important;}
	
	
	/*Removes the bottom border from the navigation*/
	.navigation_wrap { border-bottom: 0 none !important; }
	
	/*Changes  the primary nav text color AND background*/
	.main_nav li a {
		color: #FFF!important;
		background-color: #353d33!important;
	}
	
	/*CHNAGES CURRENT PAGE ITEM BACKGROUND */
	ul.main-nav li.current_page_item a {
		background-color: #353D33!important;
		color: #FFD200!important;
	}
	
	/*CHANGES HOVER BACKGROUND AND TEXT COLOR ON MAIN NAV */
	.main-nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li {
		background-color: #353d33!important;
		color: #FFD200!important;
	}

And here is the site: http://www.com-construct.com/wp

Share this post


Link to post
Share on other sites
catrina
Please add this CSS and remove the CSS you have for changing hover background and text color: [code]ul#menu-nav ul.main-nav li.page_item a:hover {color: #FFD200 !important;}[/code]

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
lisaren
Yay! Fixed it! Here is the code that worked for the hover: [code]/*CHANGES HOVER BACKGROUND AND TEXT COLOR ON MAIN NAV */ .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a:hover, .main-nav li.current-menu-ancestor ul a:hover { background-color: #353d33; color: #FFD200!important; }[/code] For some reason putting the !important before the semicolon makes all the difference in the world. Can an expert explain that to me? thanks!

Share this post


Link to post
Share on other sites
catrina
It helps override styles so that the CSS you want to use works properly. A better and more detailed explanation is here: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

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

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  

×