Jump to content
Sign in to follow this  
coxis

Hover background on main nav

Recommended Posts

coxis

Hi All, I am a little befuzzled as to how to override the grey hover on my main nav menu. This is just one of the solutions i have tried: .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background-color: none !important; } .main-nav .current-page-ancestor .current_page_item a, .main-nav li.current-page-ancestor ul a:hover { background-color:none !important; } This has not worked at all, I realise I need to remove 2 instances of the hover over grey within each item. Hope you guys can help Many thanks

Share this post


Link to post
Share on other sites
coxis
Hi there Maybe this should have been posted in the Pagelines Framework category - move request over here. sorry guys

Share this post


Link to post
Share on other sites
gyoery
You have to use CSS Pseudo classes like this: a:hover {background:transparent;} /* mouse over link */ other examples: a:link {background:transparent;} /* unvisited link */ a:visited {background:transparent;} /* visited link */ a:active {background:transparent;} /* selected link */ find more info here: http://www.w3schools.com/css/css_pseudo_classes.asp Also it is enough to write the least amount of needed IDs and classes. eg. on blog page header: .blog #header a:hover { for all pages header: #header a:hover { for all pages all links: a:hover{ writing it from memory, so double check the classes...

Share this post


Link to post
Share on other sites
catrina
Are you using Firebug to help you generate the custom CSS? If not, I highly recommend that you use it: http://getfirebug.com. Instructions for using it are here: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools

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
gyoery
here is the code from my page: #menu-navigation a:link, #menu-navigation a:visited, #menu-navigation a:active, #menu-navigation-1 a:link, #menu-navigation-1 a:visited, #menu-navigation-1 a:active { background:none; } #menu-navigation a:hover, #menu-navigation-1 a:hover{ background:transparent; font-weight:bold; } #menu-navigation .current-menu-item a, #menu-navigation-1 .current-menu-item a { background:none; font-weight:bold; } #menu-navigation a:hover, #menu-navigation-1 a:hover{ background:transparent; font-weight:bold; } (It is made for both navigation and brandnav) Here's the site: http://wp10987297.wp224.webpack.hosteurope.de/wordpress/

Share this post


Link to post
Share on other sites
coxis
Hi there, many thanks for your time on this guys, yes I am using firebug, I have tried every class and div id relevent. I can actually delete the background function on Firebug - obviously it doesnt work this way in real terms. I applied that css to my custom css but it hasnt made a difference to my main nav. Its like its hard coded?

Share this post


Link to post
Share on other sites
Danny
Hi Coxis, After reviewing your website and CSS, I noticed that your CSS was incorrect. You had the following: [code]#page .main-nav li a:hover, #page .main-nav .current-menu-ancestor .current_page_item a, #page .main-nav li.current-menu-ancestor ul a:hover, #page .main-nav .current-page-ancestor .current_page_item a, #page .main-nav li.current-page-ancestor ul a:hover { background: #; /* <--- This is not correct */ }[/code] If you wish to have no background, please use background:transparent; like so. [code].main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover, .main-nav .current-page-ancestor .current_page_item a, .main-nav li.current-page-ancestor ul a:hover { background: transparent !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
coxis
Hola Danny Sorry to be a pain with this again, but adding your code to my custom css did not make a difference (even after cache clearing). I have discovered there seems to be 6 different style sheets for /darwengolf/ checked on firebug - inline, #2, #3 etc. Is this normal on pagelines? I have also discovered if I change: .cnt-comments a, #wp-calendar caption, input, textarea, .searchform .searchfield, .wp-caption, .commentlist .alt, #wp-calendar #today, .post-nav, .current_posts_info, .success, .content-pagination a .cp-num, .hentry table .alternate td, .playpause, .main-nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background-color: #F2F2F2; } to background-color:transparent; then it seems to work - of course this is only on firebug so not sure how to apply this in my custom css - as I have tried the obvious (ie same class and div calls with background-color set to transparent to no avail. Many thanks for helping guys, must be a seriously trivial and tedious request I completely agree

Share this post


Link to post
Share on other sites
catrina
This sounds like the custom CSS selector you need to change the hover background in your main navigation links: [code].main-nav li:hover[/code]

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
Rob
I just tested [code]ul.sf-menu li { background: none repeat scroll 0 0 transparent !important; }[/code] It made your menu totally transparent, with a grey transparent shading to the child menu, but it was still transparent. I'm not sure I'd want to do that on my site, though. You can see everything behind the child menu items, creating a difficult visual experience. Are you sure you really want it all transparent?

Former PageLines Moderator, Food Expert and Raconteur

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  

×