Jump to content
Sign in to follow this  
cfclol

Navigtion background and hover

Recommended Posts

cfclol

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

Share this post


Link to post
Share on other sites
catrina

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.


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
cfclol

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

Share this post


Link to post
Share on other sites
catrina

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


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
cfclol

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

Share this post


Link to post
Share on other sites
MrFent

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

Share this post


Link to post
Share on other sites
cfclol

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

Share this post


Link to post
Share on other sites
cfclol

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

Share this post


Link to post
Share on other sites
cyentist

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...)

Share this post


Link to post
Share on other sites
cfclol

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

Share this post


Link to post
Share on other sites
Simon

Set the hover the same as the background ;)

Share this post


Link to post
Share on other sites
cfclol

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?

Share this post


Link to post
Share on other sites
kastelic

He means to set the

:hover

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

Share this post


Link to post
Share on other sites
cfclol

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 :-<

Share this post


Link to post
Share on other sites
cfclol

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.

Share this post


Link to post
Share on other sites
cfclol

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.

Share this post


Link to post
Share on other sites
tody

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!

Share this post


Link to post
Share on other sites
samwatkins

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

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  

×