Menu link hover color change – Olsen theme

Author

Posts
Nov 13, 2018 at 2:13 am #3211134

onefinehousecanada
Member

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.

Nov 13, 2018 at 2:24 am #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.
Nov 13, 2018 at 2:40 am #3211148

onefinehousecanada
Member

Thank you, that worked! :)

Nov 13, 2018 at 2:41 am #3211149

shubhamgmath
Member

You’re welcome.

Happy to help you :)

Dec 3, 2018 at 5:38 am #3222458

vanillaraincoat
Member

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.

Dec 4, 2018 at 4:08 pm #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;
}
```
Dec 7, 2018 at 1:35 am #3228119

vanillaraincoat
Member

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

Dec 8, 2018 at 3:41 pm #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. :)
Dec 10, 2018 at 11:16 am #3231290

vanillaraincoat
Member

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!

Dec 10, 2018 at 8:48 pm #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
Dec 11, 2018 at 4:05 am #3231932

vanillaraincoat
Member

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

Dec 11, 2018 at 8:21 am #3232077

torres126
Member

Happy to help. :)
Author

Posts