Trouble Getting Footer Widget to Format Correctly

[BethanyWinston]

I'm having issues with not being able to correctly change the color of my footer widget's text links. (see kiddingaroundgreenville.com, hover over the 3rd footer widget section and the text will appear as black when hovering).

I've used inspect element to locate the css code.

.button, .news-pro-blue .button:hover, .news-pro-blue .footer-widgets a, .news-pro-blue .genesis-nav-menu .current-menu-item > a {
    color: #FFFFFF;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 auto;
    float: none;
    text-align: center;
}

When I change the color to #F78820 in the inspect element editor the link changes correctly.

When I went into my css stylesheet to make the changes I've tried changing (original css is in comments):

.genesis-nav-menu .current-menu-item > a {
	background-color: #000;
        color: #F78820;
	/* color: #FFF; */
} 

and

.news-pro-blue .genesis-nav-menu .current-menu-item > a {

    color: #F78820; /* color: #fff */
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 auto;
    float: none;
    text-align: center;

}

and I've tried adding at the bottom of my style sheet:

.footer-widgets-3 a {
    color: #F68620 !important;
}

I've also flushed my cache multiple times.

Not, only is my link text still white but I'm not seeing any of these changes when inspecting the element. The CSS still shows the #FFFFFF even though I have changed it.

I'm rather new to trying to fix my own HTML and CSS so I'm probably missing something obvious. I would appreciate any help on solving this.

http://kiddingaroundgreenville.com

[Christoph]

Hi,

you zeroed-in on the wrong selector.
http://prntscr.com/c1cux3
(Firefox highlights the active selector in blue)

If you only want to change the third widget area, you could use:

.news-pro-blue .footer-widgets .footer-widgets-3 a {

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[BethanyWinston]

Thank you, Christoph.

I've added

.news-pro-blue .footer-widgets .footer-widgets-3 a {
	color: #F78820 !important;
}

My links are still white though.

Just to clarify, the full code I changed previously was:

.news-pro-blue .button,
.news-pro-blue .button:hover,
.news-pro-blue .footer-widgets a,
.news-pro-blue .genesis-nav-menu .current-menu-item > a {
    color: #FFF; /* I changed this it #F78820 */
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 auto;
    float: none;
    text-align: center;
}

I'm still not understanding why "new-pro-blue .footer-widgets a" wouldn't be affected by the change that I made since it is one of the selectors. Thank you!

[Christoph]

Hi,

None of those changes are in the style sheet.
If you are using any caching or minifying solution, please empty the cache and deactivate it as long as you work on the website.
Double-check that your changes are saved (and uploaded to the server)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts