Configure a sticky header

Header Builder supports two sticky configurations: selected sticky rows that keep their existing elements, and an automatic Sticky header clone with a predefined compact structure.

Sticky header clone

The clone automatically displays the Logo, Main menu, Search, and Cart elements in one row. Its structure cannot be edited.

Open the header and click Settings.
Open the Sticky header tab.
Set Sticky effect to Slide after scrolled down.
Enable Sticky header clone.
Configure Sticky header height and save the header.

Automatic Sticky header clone displayed after scrolling — The Sticky header clone uses a predefined one-row set of common header elements.

Sticky rows

Use sticky rows when the sticky state should display the same editable elements as the regular header.

Keep Sticky header clone disabled.
Open Edit settings for every row that should remain visible.
Enable Make it sticky.
Set Row height on sticky header.
Save the row settings and click Save header.

Custom sticky header created from editable header rows — Sticky rows retain the elements configured in the regular header layout.

Sticky behavior

Sticky header shadow adds a shadow while the header is fixed.
Hide when scrolling down hides the sticky header during downward scrolling and reveals it while scrolling upward.
Stick on scroll keeps the selected rows attached as the page begins to scroll.
Slide after scrolled down reveals the sticky header after the initial header has been passed.

Header using the Slide after scrolled down sticky effect — Choose the sticky effect that matches the required scrolling behavior.

Row-level Make it sticky does not apply while the automatic Sticky header clone is enabled.