Jump to content


Photo
- - - - -

changing navigation drop down menu background color

drop down menu color navigation

Best Answer James B , 12 March 2013 - 10:26 PM

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

Go to the full post


  • Please log in to reply
15 replies to this topic

#1 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 10:08 AM

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:  

Please Login or Register to see this Hidden Content

 

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
 

 

 

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 10:49 AM

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.

 

 

Please Login or Register to see this Hidden Content



#3 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 12:24 PM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 12:34 PM

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



#5 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 12:35 PM

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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 12:43 PM

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



#7 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 12:50 PM

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.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 March 2013 - 12:58 PM

I have just taken a screenshot of the custom CSS in action 

Please Login or Register to see this Hidden Content



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



#9 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 01:58 PM

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.



#10 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 02:06 PM

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



#11 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 05:19 PM

guess you've given up on me :(



#12 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 12 March 2013 - 06:08 PM

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.
 

Please Login or Register to see this Hidden Content

 
Lorraine


#13 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 March 2013 - 10:26 PM   Best Answer

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.

 

Please Login or Register to see this Hidden Content



#14 lmkestle

lmkestle

    Member

  • Members

  • 14 posts
  • Framework Version:Professional Edition
  • Country: Country Flag

Posted 13 March 2013 - 07:05 AM

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


#15 mrtripper

mrtripper

    Member

  • Members
  • 22 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 22 May 2013 - 12:53 PM

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



#16 Rob

Rob

    One Smart Egg

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

Posted 22 May 2013 - 03:01 PM

@

Please Login or Register to see this Hidden Content

, 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.







Also tagged with one or more of these keywords: drop down menu, color, navigation