Jump to content


Photo
- - - - -

Hover Effect on Main Navigation


  • Please log in to reply
12 replies to this topic

#1 mccooluk

mccooluk

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 06 May 2012 - 01:45 PM

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

#2 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 06 May 2012 - 03:46 PM

Add this to your custom css.

Please Login or Register to see this Hidden Content


See if that helps.

#3 mccooluk

mccooluk

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 06 May 2012 - 04:41 PM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 May 2012 - 06:08 PM

Try:

Please Login or Register to see this Hidden Content



#5 mccooluk

mccooluk

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 06 May 2012 - 06:32 PM

Still not working unfortunately

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 May 2012 - 06:58 PM

Something a bit more specific:

Please Login or Register to see this Hidden Content



#7 mccooluk

mccooluk

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 06 May 2012 - 07:45 PM

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.

Posted Image

#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 May 2012 - 09:20 PM

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.

#9 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 07 May 2012 - 06:18 AM

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,

Please Login or Register to see this Hidden Content


I tried getting rid of it, but nothing changed. Do you have some sort of javascript telling it to do this?

#10 mccooluk

mccooluk

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 07 May 2012 - 05:06 PM

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 (

Please Login or Register to see this Hidden Content

) and seem to have the same problem. I have no idea anymore!!

#11 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 08 May 2012 - 02:16 AM

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.

#12 mccooluk

mccooluk

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 11 May 2012 - 11:50 AM

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.

#13 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 May 2012 - 01:37 PM

Thanks for posting your solution.