Menu link hover color change – Olsen theme

  • Author
    Posts
  • #3211134

    Hi all,

    I’ve managed to change the hover link color in all areas of my blog except one! The top menu (with the “home” “links” and “about” buttons, etc.) is stumping me.

    I am hoping to change it so that when you hover over the links, it’s a different color… rather than the current rusty yellow shade.

    But so far, none of my CSS efforts have made a difference in that one spot.

    Help? :)

    The blog I need help with is onefinehouse.com.

    #3211139

    shubhamgmath
    Member

    Hi onefinehousecanada

    Please try using the code given below i just selected the color red in this. You can change the color according to your requirement:

    ul.nav-menu li a:hover {
        color: red !important;
    }

    Hope this helps.

    #3211148

    Thank you, that worked! :)

    #3211149

    shubhamgmath
    Member

    You’re welcome.

    Happy to help you :)

    #3222458

    Hi there,
    I can’t write code and I have a similar situation with theme colinear.
    I have the rusty orangey color when hovering over main menu and I want to change it.
    I tried this as you suggested, putting in grey for red:
    ul.nav-menu li a:hover {
    color: 58606d !important;
    }
    but nothing changed!
    Can you help at all?
    Thank you very much.

    #3224520

    torres126
    Member

    @vanillaraincoat Hi, what is the URL of your website? If you’re using a HEX code, be sure to include the # as well.

    ul.nav-menu li a:hover {
    color: #58606D !important;
    }
    #3228119

    Hi, thank you so much for replying. The URL is
    https://whatsmycolormusical.com/
    I have tried what you have suggested but that doesn’t work.
    Maybe I have made so many attempts that they are conflicting with each other?? I don’t know…
    Thanks

    #3229717

    torres126
    Member

    Please try the following, I’ve added

    !important

    because it seems necessary in this case, but if you’ve made several attempts that didn’t work, it might be best removing them in case they cause any further issues.

    .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a, .main-navigation a:hover {
    background: #58606D !important;
    }

    If you run into any further issues, please create your own thread: https://en.forums.wordpress.com/forum/css-customization/#new-post

    Let me know if that works for you. :)

    #3231290

    Hey, this works!
    Thank you so much torres126!
    Can I ask you another question?
    I have a similiar issue with this page:
    https://whatsmycolormusical.com/creatives/
    The names have that same rusty orange color and I would like to change to grey #58606D
    Do you know what code I can insert to make that happen?
    Thank you!

    #3231713

    torres126
    Member

    Sure thing. Are you able to change the colour of that link in the post editor? That’s probably the easiest and most effective way to do that. But if you can’t, this CSS should work:

    .post-32 .entry-content a {
    color: #58606D;
    }

    If you’ve got any other issues though, please create your own thread so that the OP’s email isn’t spammed if they’ve got notifications enabled. We’ll be able to help you out there too! :)

    https://en.forums.wordpress.com/forum/css-customization/#new-post

    #3231932

    Hooray, torres126! It works! You have been so helpful…thank you!

    #3232077

    torres126
    Member

    Happy to help. :)

You must be logged in to reply to this topic.