skins31 0 Report post Posted August 14, 2011 Site http://cambridgevisitor.co.uk/laraza/ Problem - drop-down menu text is same color as background so can't see until rollover. I'm sure there is a simple solution...? cheers Custom CSS so far is... #branding { background: url("http://cambridgevisitor.co.uk/laraza/files/2011/08/Logo.gif") no-repeat scroll 0 0 !important; background-color:#000000; height:140px; margin: 0 auto; padding: 0 0 0 0; width: 980px; } body{} Share this post Link to post Share on other sites
joie 4 Report post Posted August 14, 2011 try this Here is a relevant CSS from my custom CSS, try it, i hope the comments help to interpret what it means ul.sf-menu li ul.sub-menu li.menu-item a{ /*color the sub menu item when not selected */ background-color: #50C8F4; /* blue */ } ul.sf-menu li.current-menu-item a, /* color when the top menu without submenu is selected and */ ul.sf-menu li ul.sub-menu li.current-menu-item a, /* color the submenu when the submenu is selected */ ul.sf-menu li.current-menu-item a.sf-with-ul, /* color when the top menu with submenu is selected */ ul.sf-menu li.current_page_parent a.sf-with-ul, /* color the top menu with a submenu when a submenu item is selected */ ul.sf-menu li ul.sub-menu li.menu-item a:hover, /* color the top menu without a submenu when a submenu item is selected */ ul.sf-menu li.menu-item a:hover{ /* color when any menu item top or submenu is hovered */ background-color: #14C297; /* green */ } .menu-item { /* color the any menu item when it is not selected */ background-color: transparent !important; /* important is needed otherwise it become white */ } li.menu-item a{ color: #FFFFFF !important; /* color the font to white */ text-transform: lowercase !important; font-size: 13px !important; /* text-shadow: 0.1em 0.1em 0.1em black; */ } Share this post Link to post Share on other sites
skins31 0 Report post Posted August 14, 2011 YES! Fantastic. Works a treat:) Share this post Link to post Share on other sites
airplant 0 Report post Posted December 12, 2011 Hello joie, I appreciate your css suggestions. What I??m wondering is how to highlight the path to third level current/active pages. Though I was triying I had no luck. These are the so far css rules for my navigation in the project: http://www.hannelore-demel.de #primary-nav ul.sf-menu li.current_page_item a{ color: #D51F3A; } #primary-nav ul.sf-menu li.current_page_parent a.sf-with-ul { color: #D51F3A; } #primary-nav li.page_item a { color: #555555; background: #CFD2D3 ; padding-left: 7px; padding-right: 22px; } I also want the top menu item being colored while the visitor is on a third level page like here http://www.hannelore-demel.de/?page_id=44 Could you please help me out? Thanks Patrick Share this post Link to post Share on other sites