HUB - Sticky Header With Dynamic Colors

Sticky Dynamic Color is good when you have a page with dark and light sections, and you want the header to react and change colors based on each section color.

Example Link: 

To enable this feature, you need to enable Sticky Header first. You can find it in Liquid Header Options. And then you'll find Enable Sticky Dynamic Color there.

Now you can define how the header or the modules should look like this over dark or light rows.

Please also remember 2 things.

  1. You can define a row as being dark or light from the element's settings. If it's set to Automatic, it will define row luminosity based on the row's background color. Otherwise, if you don't have any background color or just a background image, you can manually set the row luminosity
  2. For most of the header modules/elements, you can find options to set dynamic colors in their settings. E.g. for Button, Trigger Button, Primary Navigation etc. If you want to set any color than what you defined in Header Options you can use these.