Archived

This topic is now archived and is closed to further replies.

  • 0

Remove hover background color on image-based subnav


Question

Posted · Report post

Hi: I'd like to know the css selector for changing the background color that shows up in the subnav on hover. I am using transparent images for the subnav, and image shows a blue bg color on mousover.

 

I've tried examining it using chrome or firefox inspector, but still can't get the code right. I have:

 

body .dropdown-menu li > a, body .dropdown-menu li > span {
 background-color:transparent!important;
    display: block;
    line-height: 21px;
    padding: 0px 0px;
 }

 

Thanks!

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

Hi there, the blue is coming from a gradient, so that will use background-image in the css instead of background. You'll need to set the background-image to :none to remove it. See the screenshot below.

 

http://screencast.com/t/bYdt1Rt4

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for letting us know that worked :) 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Could you provide a link to the site in question so that we can inspect and report back our best reply?  Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

There's obviously a lot of custom CSS in that site.  Can you please copy it and paste it to http://paste.pagelines.com ?  Just copy and paste the URL it gives you here for us to follow up.

 

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

I pasted the code. Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

We need the URL to the pasted code.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

 

The color/shadow seem to be coming from the following code

 

body .dropdown-menu {
    background-clippadding-box;
    background-color#FFFFFF;
    border1px solid rgba(0, 0, 0, 0.2);
    border-radius6px 6px 6px 6px;
    box-shadow0 5px 10px rgba(0, 0, 0, 0.2);
    displaynone;
    floatleft;
    left0;
    list-stylenone outside none;
    margin2px 0 0;
    min-width160px;
    padding5px 0;
    positionabsolute;
    top100%;
    z-index1000;
}

Share this post


Link to post
Share on other sites

Posted · Report post

I was able to change the hover color to red (and any other color) with this css:

 

body .dropdown-menu a:hover{background:white!important;}

 

but if I make the color transparent, the original blue shows through. I can't seem to completely override the blue. I think the blue coloir is coming automatically from the overall color setting in Pagelines, because my highlight color is the exact same blue.

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you so much. That worked perfectly!

Share this post


Link to post
Share on other sites