Archived

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

  • 0

changing navigation drop down menu background color


Question

Posted · Report post

I am trying to change the background color of the drop down menu in my main navigation. When you hover over the drop down menues the color is blue but I need it to be a different color.   I know it's a link, but I want to change the color to something else.

 

Here is a link to the site:  http://www.kestlemedia.com/kooki/

 

I've used firebug and google chrome to try target the html/css.  I've attached what they give me.  When I try to add css to target this I can't get anything to change.  I'm not sure what exactly I should be targeting I guess.  Would appreciate some guidance on this.

 

I've tried a few variation but mostly along these lines:

 

.dropdown-menu li.current-menu-item a {background-color:#ffffff;} - seems this should work but have also tried all kinds of other ones. 

 

.dropdown-menu li.current-menu-item a:hover {background-color:#ffffff;}

 

 
.dropdown-menu li a:hover{background-color:#ffffff;}
.nav-collapse collapse{background-color:#ffffff;}
ul #menu-main-navigation 
.font-sub navline pldrop pull-left{background-color:#ffffff;}
 
 
 
Thanks so much.
 
Lorraine
 

 

 

 

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

Hi Lorraine

 

When you find the correct area in the html on the right hand panel of the firebug inspector, this will show you the css on the right. Just copy the css classes above the css commands, like in the below screenshot. You'd copy the classes and the css in the red box on the right.

 

http://screencast.com/t/zzUdWyvwsngY

Share this post


Link to post
Share on other sites

Posted · Report post

guess you've given up on me :(

Share this post


Link to post
Share on other sites

Posted · Report post

so i know this is the rule that controls the drop down color because if I change (as shown below), in firebug the hover color changes, but i'm just not sure how to translate this to my own css page.  if i just copy and paste it from firebug where it works, (like the tutorial suggests) it doesn't work.  I don't recognize the > that is being used there.  But if I leave it in or take it out it doesn't work.  I'm so close now, but still struggling.  Any pointers?

 

 

 
dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color#FFFFFF;
    background-image-moz-linear-gradient(center top , #0088CC, #0077B3);
    background-repeatrepeat-x;
    color#FFFFFF;
    text-decorationnone;
}
 
Here's a link to a tutorial I used in case in might help someone else in the future who want to turn off the hover color and understands your html better.  This got me the right rule but didn't help translate your code onto the css to turn everything off.
 
 
Lorraine

Share this post


Link to post
Share on other sites

Posted · Report post

i'm trying to do the same thing as well but it's not working....

Share this post


Link to post
Share on other sites

Posted · Report post

@mrtripper, it is considered bad netiquette to hijack other people's topics.  Rarely are two scenarios the same, even if they seem similar. Please open your own topics and feel free to reference others, but try to avoid using the "me too" method.

 

We are very happy to help with your individual topics.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

Thanks for you feedback, what I was trying to change was not just the drop down color, but also the background color when you hover over the submenu items (book, magazine, online).  This was the code that needed to be changed.  The problem that came in was that I wasn't removing your backup image which was also blue.

 

 

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color#0081C2;
    background-image-moz-linear-gradient(center top , #0088CC, #0077B3);
    background-repeatrepeat-x;
    color#FFFFFF;
    text-decorationnone;
}
 
Once I made the change below, it gave me white on the drop down hover.

 

 

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu li.current-menu-item > a {
  text-decoration: none;
  color: #ffffff;
  background-color: #ffffff;
  background-image: none;
}
 
I've learned a lot about firebug and drop down menu.  Ha.  I could write a tutorial on this!!  Thanks for the feedback and not just leaving me out here to twist in the wind.
 
Lorraine

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Lorraine,

 

 

Instead of the inspecting the drop down menus <li>, you should be inspecting the <ul> which has a looks like this:

 

<ul class="sub-menu dropdown-menu">

 

Therefore, you should be using these classes to style the drop down menu. I have provided below a starting point for you, something which I shouldn't be doing.

 

 

#site .sub-menu.dropdown-menu { }

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Danny,

 

Thanks again.  I'm pretty sure I tried that as I've been jumping up and down that area trying various things but I didn't use the #site.  But when I added that it still didn't change.  Still confused.

 

Lorraine

Share this post


Link to post
Share on other sites

Posted · Report post

Can you post the code you have used please, as what I gave you above certainly works, as I tested it beforehand.

Share this post


Link to post
Share on other sites

Posted · Report post

#site .sub-menu.dropdown-menu {background-color:#ffffff;}

Share this post


Link to post
Share on other sites

Posted · Report post

The issue is the background is white by default, change the color to something else such as red and it should work.

Share this post


Link to post
Share on other sites

Posted · Report post

Sadly, no.  :startle:

 

ul .sub-menu dropdown-menu a{background-color:#87919f;}

 

Even cleared my browser cookies/history and checked in a different browser just in case.  Still blue.

Share this post


Link to post
Share on other sites

Posted · Report post

I have just taken a screenshot of the custom CSS in action http://cl.ly/image/0s1o2g0r0h21

Also the code you have above is not correct, its not even the same one I gave you previously, why have you changed ?

Share this post


Link to post
Share on other sites

Posted · Report post

Oh man, my eyes are crossed.  Guess I'm just too tired.  Your absolutely right, I went back to an old code by mistake.  Duh.    You've been great to walk me through this.  I REALLY appreciate it and your patience and persistence.  I know you guys don't care to do this, but for those of us on the learning curve, well, I can't thank you enough.  I know that I will NEVER need to revisit this again - how to change the drop down menu color is now saved and filed away for future use forever.  Thanks again Danny.  Have a great rest of the day.

 

Lorraine

 

PS Think I'll put off the font change idea till my brain clears.

Share this post


Link to post
Share on other sites

Posted · Report post

oh and actually now that I've got the main part changed again, it was the hover that was blue on the drop down.  and still is of course.  it was the drop down hover i needed to target that's what thew me off about the code your were giving me.  we were talking about two different things.  i had the drop down white, but it was the hover that went blue.  that's why i was putting in the a and a:hover to try and get that to change.  is this really so complicated or am i just losing my mind completely

Share this post


Link to post
Share on other sites