Modern Studio Pro Primary Nav hover issue – Chrome only

[Jim Goodrich]

I'm using Modern Studio Pro on my site thecarolingconnection.com and I'm seeing a lighter color hover background on the primary navigation (left side) only and only when using Chrome.

The site has been up for over a year and I don't know exactly when this issue started. The closest I can pin down is within the last few months.

My hosting service moved my sites to a new server as part of an upgrade, which included moving to 10.1.22-MariaDB-cll-lve.

I've tried(with no success):
- Rolling back to PHP 5.6 from PHP 7.1.6
- Pausing Cloudflare (not just putting it in development mode, though I've done that as well)
- Deactivating all plugins
- Scouring stylesheet for conflicts

I look for a Pilot error resolution first and foremost, but there's enough going on here that it could be I just don't see the issue I caused, but there's enough going on here that it could be something I had nothing to do with. Either way, I can't see the resolution. Any help would be greatly appreciated.

https://thecarolingconnection.com

[Sridhar Katakam]

I looked at your site in Chrome and don't find the problem you mentioned.

Can you share a screenshot?

---

Genesis Tutorials | Follow me on Twitter

[Jim Goodrich]

Here's what I see...

Screenshot of issue via screencast.com

It's not as pronounced in the screenshot as it appears in the browser, but it does show the issue.

[Sridhar Katakam]

Don't find that problem here. Checked in Safari as well.

Could it be that you are looking at a cached version of your site?

---

Genesis Tutorials | Follow me on Twitter

[Jim Goodrich]

I thought of the cached version possibility. I've cleared my browser cache multiple times as well as purging the Cloudflare cache, make sure I'm in Development Mode when working on and have straight up paused the site on Cloudflare in various combinations.

It only happens in Chrome (I'm using Version 58.0.3029.110 (64-bit)). I've checked it in Firefox, Opera, IE and Edge (I got rid of Safari for Windows a long time ago).

If it turns out that I'm the only one who can see the issue, I'll live with that. I'm just a bit more concerned that if I can see it, so can someone else and run the risk fo them leaving the site.

I also see it when I open an incognito window.

[Sridhar Katakam]

Checked the site now in Chrome on my PC and it's fine there as well for me.

---

Genesis Tutorials | Follow me on Twitter

[WisdmLabs]

When i inspect your nav menu style from the browser(chrome), i am seeing that default genesis style is being added for your menu link on hover. I hope that is the issue you are facing on your site. If it is, then do the following:

On hover, the color of menu links are changing from #003300 to #721c3e.

just the following styles in your theme's style.css and see if that fixes it.

ul.genesis-nav-menu li a:hover,ul.genesis-nav-menu li a:focus,ul.genesis-nav-menu li a:visited,ul.genesis-nav-menu li a:active{
 color:#003300;
}

-Vishnuprasad from Wisdmlabs

---

http://wisdmlabs.com/

[Jim Goodrich]

Thank you both for looking at this and your suggestions. While none of those were the answer, it made me look in the right places.

I used a sepia filter on the header image link like this:
[css]
.header=image a {
-webkit-filter: sepia(45%);
-ms-filter: sepia(45%);
-moz-filter: sepia(45%);
filter: sepia(45%);
}
[css]

And removed it on hover like this:
[css]
.header=image a:hover {
-webkit-filter: sepia(45%);
-ms-filter: sepia(45%);
-moz-filter: sepia(45%);
filter: sepia(45%);
}
[css]

Somehow the float: left property on .header-image .site-description >a was causing the sepia filter to show on the primary navigation.

I tried multiple combinations to resolve this which didn't fix the issue, so I changed it up and combined two filters like this:

[css]
.title-area a:hover {
-webkit-filter: brightness(93%) saturate(140%);
-ms-filter: brightness(93%) saturate(140%);
-moz-filter: brightness(93%) saturate(140%);
filter: brightness(93%) saturate(140%);
}
[css]

Not exactly the same, but very similar and it resolved the issue. I couldn't watch that issue show itself whenever I looked at the site, even if I was the only one who would see it.

Thank you for you help.

[Author]

Posts