Jump to content
Sign in to follow this  
apadilla

Remove hover background color on image-based subnav

Recommended Posts

apadilla    0
apadilla

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
Rob    547
Rob

Hi,

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

We need the URL to the pasted code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
apadilla    0
apadilla

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
apadilla    0
apadilla

Thank you so much. That worked perfectly!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thanks for letting us know that worked :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

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  

  • Similar Content

    • Umar Adil
      By Umar Adil
      Hi,
       
      My Sub Menu drop down is under the slider which hides my sub menu options. Please check on http://dev2.socrato.com/
       
       
    • digamama
      By digamama
      Hello everyone! 
       
      I'm having an issue with my website (here's the link...screenshot also attached). If you take a look you'll see that the top navigation (the item titled 'Advisory') has one item listed below it ('Case Studies'). That dropdown has additional pages under it, so it's Advisory --> Case Studies --> list of items. The problem is there's a huge vertical gap between the first dropdown option and submenu options. I hope I'm making sense...
       
      Can you please help me find the CSS selector to align the sub-drop down menu? 
       
      [attachment=1607:Screen shot 2013-10-02 at 10.41.25 AM.png]
×