How to Apply Light/Dark Schemes to the Header and Navigation Dots?
The slides in the fullpage scroller may have different background colors. In some cases, it is useful to apply a different color scheme to the website header and navigation dots depending on the slide, to prevent color merging. For example, a dark header combined with a slide that has a dark background may cause the header to become almost invisible.
You can control the color scheme of the header and navigation dots for specific slides in the following way:
Elementor
Go to the container/section settings of the respective slide and open TheGem Fullpage Slider settings:
WPBakery
Go to the row's settings of the respective slide, open the "General" settings tab, and scroll down:
Available Settings
- Header Color Scheme: Select which color scheme to apply to the website header for this slide:
- Default: No changes; the currently selected colors of the header will be displayed.
- Light Scheme: The colors set for the "light" version of the header will be applied to this slide (read more below).
- Dark Scheme: The header colors set in the theme options will be applied to this slide (read more below).
Navigation Dots Color Scheme: Select which color scheme to apply to the navigation dots of this slide:
Default: No changes; the currently selected colors of the navigation dots will be displayed. You can set navigation dots colors in Page Options -> Onepager & Scrollers:
- Light Scheme: The white color will be applied to the navigation dots of this slide.
- Dark Scheme: The black color will be applied to the navigation dots of this slide.
How to Specify the Colors for the Header’s Light/Dark Scheme?
Built-in Header
Text and Icons:
If you are using the built-in header, you can specify the colors to be used in the header’s light or dark scheme via Theme Options -> Typography:
You can add the light version of your website’s logo via Theme Options -> General -> Logo & Identity:
Header Builder
Text and Icons:
If you are using the Header Builder, you can specify the colors for the light scheme by going to the Page Options of your Fullpage Scroller page and enabling custom settings for the header in the "Menu & Header" section:
You need to:
a) Select your header template.
b) Enable the "Header Overlap" option.
c) Enable the "Use Light Color Scheme" option.
Here you will find two settings:
a) Light Color: This color will be applied to all text and icon elements in your header template.
b) Light Color Hover: This color will be applied to all hover states in the text and icon elements in your header template.
NOTE: If you have used custom colors in your header elements (i.e., manually set the colors for these elements in the page builder), these colors cannot be overwritten by the "light scheme."
Logo:
You can add the light version of your website’s logo via Theme Options -> General -> Logo & Identity (as in case of the built-in header, see above).