With Firebug for Firefox or Chrome you can easily see CSS properties on your page and then modify them in custom CSS area.
I did the following with Chrome and was able to locate the code. When I put it in the custom CSS though the text changed but the mouse hover color option did not work. This makes me think there may be other code that is effecting it. Any thoughts
Code I entered
.main-navigation li a {
text-transform: uppercase;
color: #111;
.main-navigation li a:hover {
color: ##FF8000;
}
Results on current site http://havenwoods.org.previewdns.com/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Or that you have a syntax error:
.main-navigation li a {
text-transform: uppercase;
color: #111;
Close that style off.
… and you don’t need to add text-transform: uppercase; because it’s by default.
Rather you should add text-transform: none; because your menu texts are long and in some resolutions at least one menu item wraps.
Alternatively you can reduce padding-left in .main-navigation li a
