The Sticky Header keeps selected header rows visible at the top of the browser window while visitors scroll through the page. It is useful for keeping important navigation, account controls, contact information or WooCommerce elements within easy reach.
To configure it, open the Customiser → Header → Headers tab and enable the Sticky functionality for the header you are editing.
Quick Look
Blocksy Companion required
The Sticky Header functionality requires the Blocksy Companion plugin to be installed and activated.
Granular Controls
Sticky Rows
You can decide which parts of the desktop header remain visible when the sticky state is active. This lets you keep only the most important rows on screen instead of making the entire header sticky.
Available combinations include:
- All Rows
- Main Row
- Top & Main Rows
- Main & Bottom Rows
- Top Row
- Bottom Row
Sticky Transition
The transition setting controls how the header enters and leaves its sticky state while visitors scroll.
- Default – keeps the header fixed without an additional entrance animation.
- Slide Down – slides the sticky header into view from the top of the screen.
- Fade – reveals the sticky header using a fade transition.
- Auto Show/Hide – hides the header while scrolling down and brings it back when the visitor starts scrolling upwards.
Device Visibility
The Sticky Header can be enabled independently for the available responsive device views. This lets you keep the functionality active on desktop while disabling it on smaller screens, or use it across all supported devices.
Sticky State Design
Header rows and supported elements can expose additional settings specifically for the sticky state. This lets you make the sticky version more compact or visually distinct from the regular header.
For example, header rows and the Logo element can be configured to shrink when the header becomes sticky. Other header elements can also provide separate design values for their sticky state where supported.