Jump to content
lmkestle

changing navigation drop down menu background color

Recommended Posts

lmkestle    0
lmkestle

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
Danny    1,327
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lmkestle    0
lmkestle

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lmkestle    0
lmkestle

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lmkestle    0
lmkestle

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
Danny    1,327
Danny

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 ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lmkestle    0
lmkestle

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
lmkestle    0
lmkestle

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
lmkestle    0
lmkestle

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

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


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
lmkestle    0
lmkestle

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
mrtripper    0
mrtripper

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

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


Former PageLines Moderator, Food Expert and Raconteur

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


  • Similar Content

    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • Houston Haynes
      By Houston Haynes+
      I'm still "piercing the veil" of platform 5, with page navigation the current subject of interest. I worked with a few plugins (the most useful being Next Page Not Next Post) but I wanted to take a step back and start with an example - and see if I could get a bit of help "inside the beltway". 
      What I'm looking to do is substantially similar to the pagelines docs pages - see my annotated screenshots attached. At the top of a "child" page I want a link back to the "parent" page - and at the bottom of that "child" page I want to place a similar link to the "grandchild" page. At the bottom of each grandchild page I want there to be navigation "buttons" to sibling pages in the hierarchy. 
      "Next Page Not Next Post" handles what I'm expecting for "sibling" navigation, but I'm having a bit of trouble getting over the logistical hump of applying that functionality to my page "Template C" instance only. And per the attached examples, while researching how to solve this problem I see on the Pagelines site *itself* that the navigation elements are in place - and I especially like the oval button formatting of the sibling page navigation.
      So - really, my question is two-part:
      Are there plugins/code snippets/tutorials/threads here that show how Pagelines achieved their page hierarchy nagivation, and  Is there a tutorial (or advice from generous contributors here) on how to use the PHP templates to override the content portion of the page to add the navigation elements? Thanks in advance!


×