Top Footer Navigation Links do not have a color unless selected or hover

[IanEricson]

Hello, The Pro or now Cornerstone theme is my favorite. I use it on many websites.

I have a little issue in the top footer area of this site. https://www.kristenwilkinsoncpa.com/accounting-services

As you can see the navigation menus in the top footer look pretty good except the links are difficult to read. They display nicely when selected or on hover, but they seem to be transparent or something. What am I doing incorrectly, and how can I correct it?

Here is the css I am using on this site. I do not see any here that would cause this. However when I remove this css then the text displays just fine, however the top footer area is white. How can I have a top footer background color and the menu links display correctly at the same time?

.home .x-container.offset {
margin: 0 auto;
}
.tagcloud a {
font-size: 14px !important;
}
.single-post .entry-featured,
.single-post .entry-thumb {
display: none;
}
.x-topbar {
background-color: #000;
border: 0;
}
.x-colophon.top {
background: #333 !important;
}
.x-colophon.bottom {
background: #000 !important;
}
h4 {
color: #fff;
}

[ruenel]

Hello Jon,

Thanks for writing in!

The default colors of the top footer look like this:

As soon as you inserted this custom CSS code;

.x-colophon.top {
background: #333 !important;
}

Your top footer will now look like this:

To get this resolved, you will need to change the link color and link hover colors in Cornerstone > Theme Options > Typography > Site Links.

You can set the base color and the interaction colors by clicking the color picker:

Kindly let us know how it goes.