Modules Header Hide on Scroll
Header Hide on Scroll
The header of this site is the demo: it hides when you scroll down, comes back when you scroll up, and gets a shadow after scrolling. Works with Beaver Themer headers.
↓ Scroll down: the header slides away. Scroll up a little: it comes back.
Hide and show
Hides after you scroll down past the header, returns as soon as you scroll up. A tolerance setting ignores tiny scrolls.
After scrolling
Change the background, add a shadow and shrink the padding once the page has scrolled a set distance.
Themer ready
Works on a Beaver Themer header (like this one) and on a plain header row. Full-page Sections can keep it visible.
Try it · 1 / 4
Watch the header
Keep scrolling. After a short distance the site header slides up and out of the way so more of the page stays in view.
Try it · 2 / 4
Scroll back up
Move up even a little and the header returns. A tolerance setting ignores tiny accidental scrolls so it does not flicker.
Try it · 3 / 4
After scrolling styles
Past a set distance the header can pick up a shadow, a new background and tighter padding — the “scrolled” look on this site.
Try it · 4 / 4
Where you set it
Open the header row, go to the Kinetic tab and use Header behaviour. It works on Beaver Themer headers and on a plain header row.
How to use it
Where to find it
Header row → Kinetic tab → Header behaviour.
Free Free plugin
Header Hide on Scroll is a Pro feature. Kinetic Modules Pro is one self-contained plugin: it already includes the free plugin, so you install Pro on its own. Not ready for Pro? The free plugin gives you the Kinetic tab, Scroll Effects and five modules.
Pro In Kinetic Modules Pro
- Hide on scroll down, show on scroll up
- Shrink and change background after scrolling
- Shadow and tolerance
- Works with Themer sticky headers and Full-page Sections
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.