change color of drop down menus

  • Author
    Posts
  • #75676

    newtonpens
    Member

    can I change the colors of the drop down menus with this theme? The green is ugly. When I paste css code into the css edit box, nothing changes or happens at all. Thanks.

    It’s changed for now because I don’t want the green drop downs showing up, but if I can change it then I will.

    Thanks

    The blog I need help with is newtonpens.com.

    #75781

    binarymoon
    Theme Author

    Hi there. Since you have the custom design upgrade and have currently set the theme to use blue – the menus should also be blue. If they’re not then I will ask the wordpress.com team to change that.

    In the mean time I can give you some css that will change the colour.

    .masthead .menu li ul {
    background:#3A89C9;
    }
    
    .masthead .menu li ul li {
    border-color:#16a;
    }
    
    .masthead .menu li ul:before {
    border-bottom-color:#3A89C9;
    }
    #75784

    newtonpens
    Member

    OH COOL IT WORKED!! Thanks! What about that little arrow next to the first menu item? How do I change that?

    #75797

    binarymoon
    Theme Author

    You can change that with:

    .masthead .menu li a.sf-with-ul:after {
    border-top-color:#3A89C9;
    }
    #75809

    newtonpens
    Member

    Thanks so much! Okay – last thing – I swear… I think. :)
    When a menu item is selected, and you look at it again, it’s that ugly green. How do I change that to a darker blue instead of green?

    I tried this
    .masthead .menu li ul:current {
    border-bottom-color:#3274A8;
    }

    but it didn’t do anything.

    I also tried

    .masthead .menu li ul:selected{
    border-bottom-color:#3274A8;
    }

    I don’t know where to look to cherry pick code. I did some searching but didn’t see anything similar to the code you had given me before.

    #75810

    binarymoon
    Theme Author

    There’s a short tutorial here showing how to use the developer tools in Firefox (it’s similar for chrome) to work out what css rules are needed:

    http://www.madeinebor.com/tweaking-theme-css-developer-tools/

    I basically do what is described in that tutorial – and I made the theme :) Doing it this way is the easiest I’ve found.

    The css you need is:

    .masthead .menu li ul li.current-menu-item a, .masthead .menu li ul li.current_page_item a {
    background:#16a;
    }
    #76057

    newtonpens
    Member

    Hi again-
    Just posted a new post and none of the menu bar works.
    Is it just at my end? Is it broken for you as well?

    http://newtonpens.com/2015/05/19/2015-scholarships-announced/

    Thanks

    #76058

    newtonpens
    Member

    actually – when looking at any of the blog posts the menu bar doesn’t work. :(

    #76059

    binarymoon
    Theme Author

    Hi there – I’ve just tested your site and the menu is working fine for me. What browser and operating system are you using? Perhaps you’re using something I haven’t tested on.

    #76060

    newtonpens
    Member

    Just Firefox (newest) with Win 8. I played some more last night and found out that the menu bar works, but only when I put the mouse above the links rather than directly over them. Weird…
    Thanks for looking.

    #76064

    binarymoon
    Theme Author

    Hmm – strange. I don’t know if this is related or not but is there a reason the ‘The Pens’ link doesn’t actually link anywhere? Can you try adding a url to the link and see if that helps?

The topic ‘change color of drop down menus’ is closed to new replies.