Archived topic
Is color of main nav button controlled by global colors?
1 reply · Started by Gary on December 29, 2021
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.