Site logo

Archived topic

Is color of main nav button controlled by global colors?

1 reply · Started by Gary on December 29, 2021

Viewing posts 1–2 of 2

Hi
Im unable to change the color of the main nav button (on the far right) without custom code

Im currently using Search template but same applies to several others

Is the color controlled with customiser settings? I cant find anything in customiser thats controlling it but when checking with inspect tool, main nav button has a global color variable applied

The global colors are great by the way, Im trying to use them as much as I can

cheers

Hi there,

the buttons styles are applied using CSS in Customizer > Additional CSS - this is the Search sites CSS:

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
	color: var(--accent);
	border: 3px;
	border-style: solid;
	line-height: 36px;
	border-radius: 2px;
	margin-left: 20px;
	transition: all 0.6s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
	color: var(--accent-hover);
}

You can see that the colors are using the CSS Variable names that are set in the Customizer > Colors --> Global Colors.

This archived topic is closed to new replies.