Accessed in:
- Appearance → Customize → Header Settings → Variant light – Override normal settings
- Appearance → Customize → Header Settings → Variant dark – Override normal settings
It is for horizontal header only.
How to disable it
As many users have found these options confusing for their standard needs, first we want to inform how to switch off this feature.
Since version 1.6 to turn it off for whole site go to Appearance → Customize → Header Settings → Type, variant, background → Header color variants.
How it works
Here you can set appearance of header color variant – light or/and dark. It works by overriding settings that are set for header in its “default” state. So if you won’t set here some setting it will use default setting value(from other panels).
These options are very useful when for example slider(from Slider Revolution plugin) is used at top of page and you want to make sure that nothing covers your slider.
Another example would be using a fancy title bar or fancy hero image. In these examples you don’t want the theme header to cover your art when a page is loaded, so you will make header with a transparent or semi-transparent background.
Next when slider will switch to sticky version it will have full background color so it will be fully visible & usable.
However there are 2 things you should consider in such scenario:
- When using transparent header you still should make your navigation is accessible(it has high enough contrast).
- On different pages/slides you can use backgrounds with different brightness.
And this is where header color variants come to help, as you can define 2 color variants that you can enable in such situation, depending on background brightness.
Example
For example here – we use fancy title bar with background image on Home page.
We don’t want to cover it, so we have activated light header color variant in this page options, that uses transparent background color. After you scroll down sticky header variant overrides takes over.
However on other pages of this site we use normal header color variant with full background, like here.
Tutorial
We have also tutorial on using this feature so maybe it will help make the subject more clear.