Jump to content
Sign in to follow this  
mccooluk

Hover Effect on Main Navigation

Recommended Posts

mccooluk    1
mccooluk

Hi, I have been through the forum and tried several different solutions but to no avail. I am trying to make the grey background on the hover of the main navigation menu bar transparent. Please see www.londonbrideuk.com Any help/suggestions would be greatly appreciated. Thanks in advance Chris

Share this post


Link to post
Share on other sites
Henry Perkins+    14
Henry Perkins
Add this to your custom css. [code]#nav ul li a:hover { background-color:transparent; }[/code] See if that helps.

Share this post


Link to post
Share on other sites
mccooluk    1
mccooluk
Hi Henry, unfortunately not. It seems like it is something else "under" the hover background colour. If i put in that code with a colour, it will change, but when I put in 'transparent' it seems to reveal the grey underneath. I put in rgba(255, 0, 0, 1). I then lowered the opacity, as the red disappeared, the grey became visible again. Still very confused. Another other ideas? Chris

Share this post


Link to post
Share on other sites
catrina    103
catrina
Try: [code]li.menu-item a:hover {background-color: none !important;}[/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
mccooluk    1
mccooluk
Still not working unfortunately

Share this post


Link to post
Share on other sites
catrina    103
catrina
Something a bit more specific: [code]ul.main-nav li.menu-item a:hover {background-color: none !important;}[/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
mccooluk    1
mccooluk
Thanks for helping but still nothing. I have attached a screen grab of the firebug code when hovering over the button, perhaps it might help. I think that it might have something to do with the rgba value, but don't understand where this is coming from. I have tried typing in this code and have background-color: transparent !important but that didnt work either. [img]http://londonbrideuk.com/wp-content/uploads/2012/05/grab.jpg[/img]

Share this post


Link to post
Share on other sites
Rob    547
Rob
Have you tried the Simple CSS Lite plugin found via the PageLines Store (it's free)? It would take care of hover colors for both text and background colors.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Henry Perkins+    14
Henry Perkins
In all of your CSS, there is only one reference to #565656 (the hover background color), and it is in the embedded styles on your website, [code].cnt-comments a:hover, #wp-calendar thead th, .item-avatar a, .comment blockquote, #page .wp-pagenavi a:hover, #page .wp-pagenavi .extend, .content-pagination .cp-num, .content-pagination a:hover .cp-num, ins, .main-nav li a:hover, .main-nav .current-page-ancestor .current_page_item a, .main-nav li.current-page-ancestor ul a:hover { background-color:#565656; }[/code] I tried getting rid of it, but nothing changed. Do you have some sort of javascript telling it to do this?

Share this post


Link to post
Share on other sites
mccooluk    1
mccooluk
I have tried the Simple CSS Lite plugin but to no avail. I have not done anything with Javascript. I installed a fresh copy of Pagelines on another website I will be working on (http://londonbridecouture.com/) and seem to have the same problem. I have no idea anymore!!

Share this post


Link to post
Share on other sites
catrina    103
catrina
Have you tried deactivating all active plugins? Also, what browser are you using to view your site? I'm not seeing the issue on Firefox.

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
mccooluk    1
mccooluk
I tried deactivating the plugins and Im using Firefox. The only workaround I have found is by adding: #menu-item-73 { background-color: transparent !important; color: transparent !important; } as well as .cnt-comments a, .cnt-comments a:hover, .tcolor2, .lcolor2 a, .subhead, .widget-title, #branding .site-description, #callout, #commentform .required, #postauthor .subtext, .commentlist .comment-meta a, .content-pagination span, .content-pagination a .cp-num, .comment.alt .comment-author, .tcolor3, .lcolor3 a, .main_nav a, .widget-title a, h3.widget-title a, #subnav_row li a, .metabar em, .metabar a, .tags, #commentform label, .form-allowed-tags code, .rss-date, .comment.alt, .reply a, .auxilary a, .cform .emailreqtxt, .cform .reqtxt { background-color: transparent !important; } There is still this creating an overlay colour: .cnt-comments a, .cnt-comments a:hover, .tcolor2, .lcolor2 a, .subhead, .widget-title, #branding .site-description, #callout, #commentform .required, #postauthor .subtext, .commentlist .comment-meta a, .content-pagination span, .content-pagination a .cp-num, .comment.alt .comment-author, .tcolor3, .lcolor3 a, .main_nav a, .widget-title a, h3.widget-title a, #subnav_row li a, .metabar em, .metabar a, .tags, #commentform label, .form-allowed-tags code, .rss-date, .comment.alt, .reply a, .auxilary a, .cform .emailreqtxt, .cform .reqtxt { color: rgba(255, 255, 255, 0.6); } Anyway, I can make do with how it is now, just thought I would post this in case anybody else has the same issue.

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  

×