Hub Elementor - Sticky Header with Dynamic Colors

Sticky Dynamic Color is ideal for pages with both dark and light sections, allowing the header to change color based on each section's background.

You can see this feature in action in the demo: Sticky Dynamic Color Demo.

To enable this feature, first, activate the Sticky Header option. You can find this setting under Header Design Options in your header template. Once activated, locate the Enable Sticky Dynamic Color option and turn it on.

If you don't know how to access the Header Design Options, you can get help from this article: https://docs.liquid-themes.com/article/561-hub-elementor-how-to-enable-sticky-header

Once enabled, you can customize how the header and its modules appear over dark or light sections.

Please keep in mind the following:

  1. You can specify whether a section/container is dark or light from the element's settings. If set to 'Automatic,' the section's luminosity will be determined by its background color. However, if the section lacks a background color or only has a background image, you can manually set the section's luminosity.


  2. Most header modules and elements, such as Buttons, Trigger Buttons, and Primary Navigation, have options to set dynamic colors in their settings. If you want to customize the colors beyond what's defined in the Header Options, you can do so using these settings."