WordPress.org

Ready to get started?Download WordPress

Forums

Coller
Menu Hover & Link Color (10 posts)

  1. taryngray
    Member
    Posted 4 months ago #

    I've looked through all of the support questions and can't seem to figure out how and where to change the code (or add custom css) to change the menu item hover color from turquoise and the link hover menu from the bright green. I'm using the Coller theme (not Collerange).

    Can anyone PLEASE help me figure out how to do this? I've tried changing the code all through the stylesheet.css and just can't get it to work.

    I love this theme and really want to make it work, I just need the colors to match my logo.

    Any help is appreciated! Thank you

  2. BjScott
    Member
    Posted 4 months ago #

    Hello! Can you post your site URL so I can take a look? Thanks!

  3. Meiji
    Member
    Posted 4 months ago #

    Hey there! :)

    Do you have a link to your site? I could tell you easier that way.

    Some themes have custom CSS sections and several colors to use, if yours doesn't, you could install this plugin too add custom CSS without touching the style.css file:
    http://wordpress.org/plugins/simple-custom-css/

    But I'd need a link to your site to tell you what code to add.

    Cheers!

  4. taryngray
    Member
    Posted 4 months ago #

    The site is

    http://thehiddenveggie.com

    Thanks so much! Any help is really appreciated

  5. Meiji
    Member
    Posted 4 months ago #

    Hey there :)
    To change the turquose (add in a custom CSS):

    .main-navigation li:hover > a {
    background: #f3f3f3;
    border-top: #FF0000 solid 4px; /* The color you want, here's red */
    padding-top: 16px;
    }

    For the bright green:

    a {
    color: #0000FF; /* Change here, this is blue for example */
    text-decoration: none;
    }

    For its hover:

    a:hover, a:active {
    outline: 0;
    color: #00FF00; /* Change here */
    }

  6. taryngray
    Member
    Posted 4 months ago #

    Thanks! I added it to the Custom CSS section in my Theme Settings

    It works perfectly for the links and the link hover but it's not working for the menu hover color (not changing the turquoise.

    This is what I put in

    .main-navigation li:hover > a {
    background: #f3f3f3;
    border-top: #ed503b solid 4px;
    padding-top: 16px;
    }

    a {
    color: #ed503b;
    text-decoration: none;
    }

    a:hover, a:active {
    outline: 0;
    color: #000000;
    }

    The color I want for the hover is a kind of earthy green (#8c9743)

    Also, if you can tell me how to change the color of the search bar (right now it's a bright green). That's way less important to me than the hover color though.

    Thank you SO MUCH for your help!

  7. Meiji
    Member
    Posted 4 months ago #

    Try overriding it with an '!important':

    .main-navigation li:hover > a {
    background: #f3f3f3;
    border-top: #8c9743 solid 4px !important; /* Here */
    padding-top: 16px;
    }

    For the search button:

    .widget_search input[type=submit] {
    display: inline;
    background: #0000FF !important; /* Color here */
    border: none;
    padding: 7px 15px;
    height: 29px;
    box-shadow: none;
    border-radius: 0px;
    border-bottom: #00FF00 solid 5px !important; /*Bottom color here*/
    position: relative;
    top: -3px;
    color: #fff;
    text-shadow: none;
    text-transform: uppercase;
    }

  8. taryngray
    Member
    Posted 4 months ago #

    Thanks for your help Meiji.

    The search bar worked perfectly but I can't get the menu bar hover to work no matter what. I've tried putting it in different spots (custom CSS section and in the custom style editor.php under editor). I tried putting it above the search edits, and the link hover edits....below those edits...in between those edits.

    with important...without important.

    I'm completely lost for what to do from here. It's baffling me that nothing is working to change it.

    any ideas from here?

  9. Meiji
    Member
    Posted 4 months ago #

    Hi :)

    Try this:

    .main-navigation a:hover {
    background: #f3f3f3;
    border-top: #8c9743 solid 4px !important;
    padding-top: 16px;
    }

  10. taryngray
    Member
    Posted 4 months ago #

    YOU ARE MY HERO!! thank you so much!!

    that worked perfectly :)

Reply

You must log in to post.

About this Theme

About this Topic