Artem Semkin Header Engine for Elementor

Turn any Elementor Container into a site header that knows what to do on scroll: pin it to the top, tuck it away while readers scroll down, bring it back the moment they scroll up, and restyle it while it is stuck. You set it all up in the Container’s own settings panel. There is no separate builder to learn, and the free version of Elementor is enough.

What you get

• Sticky header — the container pins to the viewport once the page would scroll it away.
• Auto-hide and reveal — the header slides out of view on scroll down and returns the moment the reader scrolls up, from anywhere on the page.
• Transparent overlay headers — lay the header over your hero section, then give the sticky state a solid background so it fills in as it pins.
• Sticky-state styling — separate background, border, box-shadow and padding for the stuck header, set with Elementor’s native style controls.
• Recolor while sticky — remap any Elementor Global Color for the stuck header: every widget inside that uses it — menus, buttons, icons, from any addon — switches with it. No per-widget color settings to hunt down.
• Logo swap — the bundled Dual Site Logo widget switches between a primary and a secondary logo when the header sticks, so a light logo over the hero can become a dark one on a solid sticky bar.
• Header zones — mark any other container on the page to hide the header while visitors scroll over it, or to reveal and lock it there. Handy over full-screen galleries and embedded maps.
• Reveal offset — start auto-hiding only after a chosen scroll distance: a custom value, the viewport height, or the header’s own height.
• Pin offset — stick the header below a custom line. Negative offsets work too, which lets a tall header stick in a compact form.
• Bottom dock — fix the header to the bottom edge instead; auto-hide slides it down and out of the way.
• In-page sticky bars — the Default position keeps the container in the page flow and pins it within its parent: mid-page filter bars, sub-menus, section navigation.
• Multiple headers per page — every container you mark runs as its own independent instance.

Built to stay out of your way

• Zero runtime dependencies. The engine ships without jQuery or animation libraries, so there is nothing for other plugins to conflict with.
• The engine only toggles CSS classes and custom properties; every visible animation runs in CSS. There is no per-frame JavaScript styling.
• No layout jumps. Overlay headers never affect page flow, and in-flow headers reserve a constant slot, so the page does not shift when the header sticks or shrinks.
• No external services. Nothing loads from third-party servers and nothing phones home.
• There is no Pro tier. Every feature is included, and your dashboard stays free of ads.

Works with

• Elementor Free. The header is a regular Container, styled with the controls you already use.
• Any theme. The plugin ships its styles in a dedicated CSS cascade layer, so your theme’s CSS wins any conflict.
• Elementor Pro Theme Builder header templates, for the Top and Bottom positions.

For developers

The engine publishes its state as CSS classes and custom properties on the header wrapper and fires CustomEvents on document: arts/header/sticky, arts/header/hidden, arts/header/locked, arts/header/released, arts/header/displaced. The TypeScript and SCSS source lives on GitHub: https://github.com/artkrsk/header-engine-for-elementor