Authority PRO Navigation

[odnt]

In the Authority PRO styles.css, I'm not seeing changes made to the color value for:
.genesis-nav-menu a:hover { color: #000cff; }
Any advice?

http://localhost

[Victor Font]

Since you're running on local host, it's not possible to help determine a cause if we can't inspect the CSS.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[odnt]

Thanks Victor. Use this URL:
https://www.electbeachpace.com/

Here's the setting I have in Additional CSS:
.genesis-nav-menu a:hover { color: red; }

[Henrik Blomgren]

Hi,

What happends is that you have chosen a color in the customizer. This value is then sent out to the theme to replace the other occurances of said color.

So the reason your code isn´t working is because of that it get denied since it is not the last loaded css style for this selector.

If you try

.genesis-nav-menu a:hover { color: red !important; }

I believe it should work.

What !important does is tell the browser that hey browser. Even if you find this selector and a different code further down in the style.css or even if it´s added after the style.css has loaded it should still be this value. It´s important!

Hope this helps.

[odnt]

Thanks Henrik! That works, even though I haven't had this issue with other Genesis themes.

[Henrik Blomgren]

Oh I´ve bonked my head against the monitor a lot wondering why something isn´t being the "chosen style" and noticed two things.

1: On what line you place the CSS on is important. Have the same selector further down? it will not load the style you place above it. As it should be as the file is read top to bottom.

2: When using the customizer in WordPress it outputs style choices made there into a <style> segment on the website For Authority pro as it is coded the color chosen is taking over a lot of selectors and since it is loaded after the style.css it demands a !important in the style.css that you want to work.

Or you could simply do it the old fashioned way and only edit the style.css file but that brings it´s own set of things that can go wrong. Like forgetting to rename the child-theme and then updating it so every change you did is gone XD And yes, I´ve done this.

[odnt]

I tried putting .genesis-nav-menu a:hover {color: red;} at the end of the theme's style.css and at the end of Additional CSS in the Customizer. Neither one worked. The only way to get the red hover color is to use the !important declaration, as you suggested.

[Author]

Posts