cfclol 0 Report post Posted May 20, 2011 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 103 Report post Posted May 20, 2011 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 0 Report post Posted May 20, 2011 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 103 Report post Posted May 20, 2011 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 0 Report post Posted May 20, 2011 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+ 28 Report post Posted May 20, 2011 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 0 Report post Posted May 20, 2011 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
Simon 248 Report post Posted May 20, 2011 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 Share this post Link to post Share on other sites
cfclol 0 Report post Posted May 20, 2011 Thanks Simon. I'll check it out and report back. Cheers Share this post Link to post Share on other sites
cyentist 0 Report post Posted May 20, 2011 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 0 Report post Posted May 20, 2011 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 248 Report post Posted May 20, 2011 Set the hover the same as the background Share this post Link to post Share on other sites
cfclol 0 Report post Posted May 20, 2011 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 6 Report post Posted May 20, 2011 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 0 Report post Posted May 21, 2011 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 0 Report post Posted May 21, 2011 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 0 Report post Posted May 21, 2011 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 0 Report post Posted May 25, 2011 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 0 Report post Posted June 14, 2011 @SIMON: THANK YOU for this plugin! It saves me a ton of time. Share this post Link to post Share on other sites