hallowebsite Sticky Header for Kadence

Overview

hallowebsite Sticky Header for Kadence lets you build a multi-row header from Kadence blocks and decide, row by row, what sticks, what hides while scrolling down and what scrolls away. Everything is controlled with CSS classes in the block editor, so there's no settings maze. The plugin only adds behaviour and positioning. Colours, shadows and blur stay in your theme CSS. The same system also works for sticky rows inside page content, such as filter bars or tabs, which line up exactly below the visible header.

Features

• Any number of sticky rows that stack cleanly below each other.
• Per-row modes: always visible, hide on scroll, reveal on scroll up.
• Content scopes: sticky rows inside the page that sit below the live header bottom.
• Automatic state classes (is-stuck, is-hidden, is-visible) for styling.
• Native CSS sticky for content rows, so they don't jump when they become sticky.
• Separate z-index layers, so content rows never cover the header.
• Backward compatible with the old sticky-header class.

Setup in Kadence

1. Build your header in a Kadence Row Layout (Spaltenlayout). Set its HTML tag to header if possible.
2. Add the class hw-header to the outer header block.
3. Create several rows inside it.
4. Add hw-sticky-row to every row that should stick, plus a mode class.
5. Rows without hw-sticky-row scroll away normally.

Class reference

Class	Where	Effect
hw-header	Outer header block	Reference wrapper for the whole header.
hw-sticky-scope	Outer content section	Reference wrapper for sticky rows inside page content.
hw-sticky-row	Inner row	The row becomes sticky and stacks below previous sticky rows.
hw-always-visible	Sticky row	Always stays visible.
hw-hide-on-scroll	Sticky row	Hides when scrolling down and returns at the top.
hw-reveal-on-scroll	Sticky row	Hides when scrolling down and returns immediately when scrolling up.
hw-no-shadow	Sticky row	Removes the sticky shadow.
hw-normal-row	Any row	Optional marker only. Rows are normal anyway.

Examples

Three-level header
  header block:  hw-header
  Row 1 logo:    hw-sticky-row hw-always-visible
  Row 2 menu:    hw-sticky-row hw-hide-on-scroll
  Row 3 subnav:  hw-sticky-row hw-always-visible

Sticky filter bar in content
  section:       hw-sticky-scope
  filter bar:    hw-sticky-row hw-always-visible
  tabs:          hw-sticky-row hw-reveal-on-scroll

Styling

Add visual styles in Appearance → Customize → Additional CSS, ideally with your Kadence palette:

:root {
  --hw-sticky-top: 0px;
  --hw-sticky-z: 9999;
  --hw-header-z: 100000;
  --hw-content-sticky-z: 9000;
  --hw-sticky-speed: .35s;
}
.hw-sticky-row.is-stuck {
  background: var(--global-palette9);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

Notes

• The full guide is under Settings → Flexible Sticky Header.
• If no inner sticky rows exist, the whole header behaves as one hide-on-scroll header.

Changed:
- Rebranding: neuer Name „hallowebsite Sticky Header for Kadence“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/sticky-header-for-kadence/
- Keine funktionalen Änderungen.