Navigtion background and hover

[cfclol 0]

Hi Folks I am trying to change the background and hover colour for my main navigation but am having no luck. I have tried adding the following code to my base.css file 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;} but it has no effect. If I check with firebug the elements are crossed out so it looks as if something is superceding them but I can't work out what. Um...help? Url is www.design309.co.uk Many thanks

[catrina 103]

When I look at your code in Firebug, I'm seeing ul.menu-nav1 instead of ul.main-nav. Perhaps you should change your selector to menu-nav1 and the CSS will work as it should.

[cfclol 0]

Hi Catrina Thanks for responding. I have changed the code to:

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

But alas nothing changes. I must admit I breezed through everything else but this has me stumped for some reason. Cheers

[catrina 103]

Add this instead:

ul#menu-nav1 li#menu_item a {color: #fff; background-color: #00A9E7;}
	ul#menu-nav1 li#menu_item a:hover {color: #000; background-color: #F2F2F2;}

[cfclol 0]

No dice I'm afraid. Just out of curiosity why did you insert the #'s?

[MrFent+ 28]

This what you want? #primary-nav .texture { background-color: #00A9E7; color: #FFFFFF ; } ul.main-nav li a:hover { color: #000000; }

[cfclol 0]

Hi Chris Appreciate your help. I think we're almost there. I just need to be able to change the colour of the hover background. Cheers

[Simon 248]

You may like to try a small plugin I created to show how easy it is to extend Platforms options. http://dl.dropbox.com/u/29858470/platform_nav_example.php.zip

[cfclol 0]

Thanks Simon. I'll check it out and report back. Cheers

[cyentist 0]

Have you tried the settings under: Pagelines Settings >> Design Control >>Secondary Site Element Colors Setup Colors For Elements Designed To Contrast With The Primary Elements (Hover Effects, etc...)

[cfclol 0]

The plugin works a treat! Many thanks. Still just one problem though. I have now decided I want to do away altogether with the hover background. Anyone know an easy way to eradicate it? Cheers

[Simon 248]

Set the hover the same as the background

[cfclol 0]

Hi Simon The background is an image so that wont work. I just don't want the hover background at all but can't figure out how to remove it. I'm guessing it's something simple?

[kastelic 6]

He means to set the

:hover

state background color the same as the non-hover state.

[cfclol 0]

Hi Jimmy Thanks but I have tried to do this but nothing seems to work. Can you tell me exactly what line of code I need to change as this is starting to drive me nuts :-<

[cfclol 0]

Hi Simon Your plugin works great but there doesn't seem to be a way to set the hover background to

none

. I must be missing something because I would assume that this should be very easy to do.

[cfclol 0]

Aha! I figured it all out...teach a man to fish and all that :-) many thanks to everyone who contributed to this thread. I'm not sure I have used the most elegant solution and I am happy to be enlightened with a more correct way of doing it but iff anyone reading this wants to know how I did it... I added the following to bases.css:

.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, content-pagination a {
	color:#ffffff;
	background:none;
	}

I then added

background:none;

to the "box color - primary elements" section in "design control" (that was just a wild guess because I wasn't sure you could add css code in there). Anyway hey presto! it worked.

[tody 0]

Hi guys! I'm having also trouble with this menu, I complicated my life further more because I would use in my head block that combines logo and primary navigation. At first it was my dreams come true, but when I need to change colours al hell broke out. There is superfish css there is main css and there is some default css rules for one menu. Is ther any hope that you can simplify this? Like this plugin Simon mentions you can put two of boxes or three one for primary second for this second block. Still need help where can I change the colours of fonts on active tab? and where only on drop down menu (second level)? Thanks for your help!

[samwatkins 0]

@SIMON: THANK YOU for this plugin! It saves me a ton of time.