I am a complete rookie and I have tried to add custom CSS to change the color of my navigation items when a visitor hovers over them, but I cannot get it to work. I want the text to be white by default, and #FFBD59 when hovering.
I also like the small icons in front of my header, but they stick to the top of the field, not the center. I would prefer that they are always at the same level.
This is how it looks at the moment (travelingkunz.com)
I use the Twenty Twenty-Four Version: 1.2 Theme, not editor plugins.
How can I adjust this? Can someone provide CSS and also tell me how/where to apply it?
I have a similar issue with my posts page. The title is a link, but if the visitor hovers over it, it turns into the same background color, so the text seems to disappear. I want the hover color to be black or white.
I am glad about any support 🙂
Under Styles I tried ti add these additional CSS, but it does not work
*****css / Default color */ nav a { color: white; }
/* Hover color */ nav a:hover { color: #FFBD59; }
and
css / Hover color for links / .post a:hover { color: black; / or white as needed */ }
It was likely just a specificity issue.
body nav a.wp-block-navigation-item__content:hover {
color: #FFBD59;
}