Skip to main content

Transparent Header Effect

Header Builder

With a Header Navigation template active, this section shows a Header Builder Active notice and keeps only Transparent Header and Automatically Enable On. They decide which pages start in the header's Transparent state, which you style in the template. See When each state applies and What the Customizer still controls.

Transparent Header​
  • Causes your header to be completely transparent before the user scrolls. This will be triggered automatically when using a post header, or you can turn it on for an individual page from the block editor: open Nectarblocks Post Options in the document sidebar and enable the Transparent Header toggle (a Color picker chooses the light or dark variant unless the Header Builder controls it). The per-page toggle only takes effect while this Customizer option is enabled.
Automatically Enable On​
  • Turns on the transparent header for whole post types, so you don't have to enable it on each post. Each post type is listed twice: Single for its posts and Archive for its archive pages, including category, tag and author archives. Pages and WooCommerce products aren't listed.
  • This will be used when the header is transparent before the user scrolls.
  • A separate header starting logo that will be shown on mobile devices only.
  • This will be used when the header transparent effect is active and the dark color is selected.
  • A separate header starting dark logo that will be shown on mobile devices only.
Transparent Light Text Color​
  • Select the color you desire for your header text before the user scrolls
Transparent Dark Text Color​
  • Select the color you desire for your header text when the dark header is active.
Header Starting Text Opacity​
  • Default (Dimmed)
  • Full Opacity
Header Permanent Transparent​
  • Turning this on will allow your header to remain transparent even after scrolling down. This option will override all colors. When using an image logo, it must have a transparent background (PNG or SVG). While it's on, the dark logo and text color settings are hidden. Not available with the Menu Bottom Bar header layout. An example of this effect can be seen on the Nectar Solutions template.
Add Shadow Behind Transparent Header​
  • Add a subtle shadow behind your transparent header to help with the visibility of your navigation items.