Color of the selected menu name.

Hi,

The reason the plugin does that is because there isn’t enough color contrast between the background and text colors there (according the color contrast calculations and standard accessibility guidelines). Unfortunately, your color scheme (which is cool, by the way!) doesn’t lend itself to this approach since the gray color is hard to achieve contrast with by going lighter.

You should add the following css via a custom css plugin to override that part of the code:

/* Override higher contrast Accent Color against contrast color */
	.site-navigation .current_page_item > a,
	.site-navigation .current_page_ancestor > a,
	.site-navigation .current-menu-item > a,
	.site-navigation .current-menu-ancestor > a,
	.site-navigation a:hover,
	.featured-content a:hover,
	.featured-content .entry-title a:hover,
	.widget a:hover,
	.widget-title a:hover,
	.widget_twentyfourteen_ephemera .entry-meta a:hover,
	.hentry .mejs-controls .mejs-button button:hover,
	.site-info a:hover,
	.featured-content a:hover {
		color: #ff0000;
	}

	.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
	.mejs-overlay:hover .mejs-overlay-button,
	.slider-control-paging a:hover:before,
	.slider-control-paging .slider-active:before,
	.slider-control-paging .slider-active:hover:before {
		background-color: #ff0000;
	}

But you might want to try a different color for these particular ones, since the red ends up being a bit difficult to read.

Thank you for your response and compliment ??
I will get this going. Agree, #ff0000 is difficult to read so I will try some other variation of red.

I could not override the above custom css no matter what. I am using Simple Custom CSS plugin.

Every other custom css change is effective except this. Any ideas please. Thank you.

I got the above custom css working by adding !important as following:

/* Override higher contrast Accent Color against contrast color */
	.site-navigation .current_page_item > a,
	.site-navigation .current_page_ancestor > a,
	.site-navigation .current-menu-item > a,
	.site-navigation .current-menu-ancestor > a,
	.site-navigation a:hover,
	.featured-content a:hover,
	.featured-content .entry-title a:hover,
	.widget a:hover,
	.widget-title a:hover,
	.widget_twentyfourteen_ephemera .entry-meta a:hover,
	.hentry .mejs-controls .mejs-button button:hover,
	.site-info a:hover,
	.featured-content a:hover {
		color: #ffffff !important;
	}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
	.mejs-overlay:hover .mejs-overlay-button,
	.slider-control-paging a:hover:before,
	.slider-control-paging .slider-active:before,
	.slider-control-paging .slider-active:hover:before {
	background-color: #ff0000;
}

I use Jetpack on chaitanyamsv.com so did not have to install Simple Custom CSS plugin. Rather I edited in Appearance – Edit CSS.

Things that did not work:

Hardcoding #ff0000 in color-patterns.php
Adding this style to style.css of my child theme. I attempted this to avoid installing custom css plugin in my Development WordPress but to no avail.

Anyway I am happy with the tweaks to my site. Thanks for your help. Cheers.

Yes, you’ll probably need the !important depending on where the CSS is loaded.

For others, note the Edit CSS comes from a Jetpack module and is a good custom CSS plugin option. Do not confuse this with Appearance -> Edit, which should never be used except for custom themes.