1. Home
  2. Docs
  3. Customizing the Theme
  4. Header Settings
  5. Variant light/dark – Override

Variant light/dark – Override

Accessed in:

  • Appearance → Customize → Header Settings → Variant light – Override normal settings
  • Appearance → Customize → Header Settings → Variant dark – Override normal settings

It is for the horizontal header only.

These settings are only available in Rife Pro.

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 the whole site go to Appearance → Customize → Header Settings → Type, variant, background → Header color variants.

How it works

Here you can set the appearance of header color variant – light or/and dark. It works by overriding settings that are set for the 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 the 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 a scenario:

  1. When using a transparent header you still should make your navigation is accessible(it has high enough contrast).
  2. 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 a situation, depending on background brightness.

Example

For example here – we use a fancy title bar with a background image on the Home page.

We don’t want to cover it, so we have activated a 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 a normal header color variant with a full background, like here.

Tutorial

We have also tutorial on using this feature so maybe it will help make the subject more clear.

Was this article helpful to you? Yes No 1