Menu link hover color change – Olsen theme

onefinehousecanada · Member · Nov 13, 2018 at 2:13 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
shubhamgmath · Member · Nov 13, 2018 at 2:24 am
Copy link
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.
onefinehousecanada · Member · Nov 13, 2018 at 2:40 am
Copy link
Thank you, that worked! :)
shubhamgmath · Member · Nov 13, 2018 at 2:41 am
Copy link
You’re welcome.

Happy to help you :)
vanillaraincoat · Member · Dec 3, 2018 at 5:38 am
Copy link
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.
torres126 · Member · Dec 4, 2018 at 4:08 pm
Copy link
@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;
}
```
vanillaraincoat · Member · Dec 7, 2018 at 1:35 am
Copy link
Hi, thank you so much for replying. The URL is

TRAILER

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
torres126 · Member · Dec 8, 2018 at 3:41 pm
Copy link
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. :)
vanillaraincoat · Member · Dec 10, 2018 at 11:16 am
Copy link
Hey, this works!
Thank you so much torres126!
Can I ask you another question?
I have a similiar issue with this page:

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!
torres126 · Member · Dec 10, 2018 at 8:48 pm
Copy link
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
vanillaraincoat · Member · Dec 11, 2018 at 4:05 am
Copy link
Hooray, torres126! It works! You have been so helpful…thank you!
torres126 · Member · Dec 11, 2018 at 8:21 am
Copy link
Happy to help. :)

No items found.