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

Variant light/dark – overwrites

Accessed in:

  • Appearance → Customize → Header Settings → Variant light – overwrites
  • Appearance → Customize → Header Settings → Variant dark – overwrites

It is for 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 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 overwriting 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 fancy title bar or fancy hero image. In these examples you don’t want theme header to cover your art when page is loaded, so you will make header with 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:

  1. When using 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 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 overwrites 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 subject more clear.

Was this article helpful to you? Yes No

How can we help?