Changing header variant on slide

Idea

Often usage of sliders from Slider Revolution plugin is to put them as hero sliders at top of your page. You don’t want to make such slides to be covered by anything, so good idea is to make theme header to be transparent – if you are using horizontal variant of theme header.

Problem is that when you have slides with different backgrounds(light & dark) your content in transparent header may be hard to read. That is when you can use theme header color variants.

As good example you can see this design. On second slide you will see theme header changing colors.

How to use it

You will need to have your header color variants defined and slider made in Slider Revolution plugin.

When you have it ready, we need to edit slides and tell theme, what header variant you want to use on each slide.

To do it edit slide and next go to Edit Slide → Link & Seo → Custom Fields(see screen shot below), where we will insert one of three values:

  1. data-variant="light" – use it to have light variant of header
  2. data-variant="dark" – use it to have dark variant of header
  3. no value at all – it will then use default colors for header

Important to note is that this only works for horizontal header.

How to set header color variants for Slider Revolution
How to set header color variants for Slider Revolution
Was this article helpful to you? Yes No