PlatformPro/Base Menu bar

[maurice 0]

Hi, I've been trying to find the CSS codes that controls the standard menu bar of PlatformPro 1.5.1 + Base. I want to control the [*]menu button colour [*]hover colour [*]displayed page colours so I can build custom CSS. I'm using the following code to control teh background colour of the menu bar.

#primary-nav .texture {
	background-color: #003244;
	color: #FFFFFF ;
	}
	ul.main-nav li a:hover {
	color: #000000;
	} 

This is the site URL http://mauricemoore.com.

[Danny+ 1,327]

Hi Maurice, This code works for me and allows you to chance the link color, background and the second changes color to both link and background on hover over.

	.main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, .sf-menu li li, .sf-menu li li, .sf-menu li li li {
	    background: none repeat scroll 0 0 #XXXXXX;
		color:#XXXXXX !important;
	}
	
	.main_nav .main-nav li a:hover, .current_page_item a, .current_page_item ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover {
	    background: none repeat scroll 0 0 #XXXXXX;
	    color: #XXXXXX !important;
	}

[maurice 0]

I have tried to find the code using Firebug but I haven't been able to figure out which of the code sets control the menu. Do you have a published list and what they do available?

[maurice 0]

Thanks for your help Danny, looks good except that I haven't been able to change the normal colour of the menu button. If I change it in the design control section, that changes the background of other elements. Can you point me towards the code that controls that one element? It's late here in NZ so I won't get back to this until tomorrow. Thanks for your help. I'll set the colours properly in the morning. <p>This is the site URL http://mauricemoore.com.

[Danny+ 1,327]

This should do the trick! .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: #XXXXXX; }

[maurice 0]

Thanks very much for your help Danny, much appreciated. Here is the full code for anyone else that's looking for the same functionality.

#primary-nav .texture { background-color: #xxxxxx; color: #xxxxxx !important; } .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: #xxxxxx; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, .sf-menu li li, .sf-menu li li, .sf-menu li li li { background: none repeat scroll 0 0 #xxxxxx; color:#xxxxxx !important; } .main_nav .main-nav li a:hover, .current_page_item a, .current_page_item ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover { background: none repeat scroll 0 0 #xxxxxx; color: #xxxxxx !important; }

[joel 0]

Awesome, thanks :-)