Menu Item with Custom Link Changes Colour when Clicked

Hi Lawrie

I think WP Fastest Cache might be changing the order of the CSS a bit. The light blue is the original hover color which is taking precedence over the settings color selected in the Customizer. One option might be to exclude the theme stylesheet from WPFC, its file path is /wp-content/themes/vantage/style.css. Alternatively, you could try the following in Custom CSS:

main-navigation ul li:hover > a, .main-navigation ul li:focus > a, #search-icon #search-icon-icon:hover, #search-icon #search-icon-icon:focus {
    background-color: #002f77 !important;
}

Thanks for your reply Andrew. Unfortunately neither the custom CSS or excluding the style sheet in WP Fastest Cache helped. I also deactivated WP Fastest Cache but that had no effect either.

Thanks. It might be Autoptimize, perhaps try adding /?ao_noptimize=1 to the URL to test. If that resolves the issue you could perhaps take a look at the AO settings and experiment a bit in the CSS section.

No luck Andrew but I have narrowed it down to a conflict with the Open External Links in a New Window plugin, which I have now deactivated.

Super, thanks for the update. I’ll get back to tomorrow for this issue and the NextGen question. Thanks for the wait.

Please, try the following Custom CSS:

.main-navigation ul li:hover > a, .main-navigation ul li.focus > a {
	background: #002f77 !important;
}

Thanks

Thanks Andrew
When I return to the original page there is still a dotted line around the tab but the dots are very small and the colour issue has been resolved so I can live with that.
Thanks again

Glad to hear that helps. You can try:

a {
   outline: 0;
}

Thanks Andrew. You put me on the right track. Perfect now.

Super, glad to hear you’re making progress. Here is a reference post for that last change https://css-tricks.com/removing-the-dotted-outline/.

Thanks again Andrew

For info, to make it work I actually had to use
.main-navigation ul li:hover > a, .main-navigation ul li.focus > a {
outline: 0 !important;
}

But that’s probably just me ?? I don’t really understand this stuff!

That looks perfect. You can’t cause a fatal error with CSS so you’re free to experiment.

Cheers for now ??