Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

Sticky Header

Sticky Header· Demo

How it works

Sticky Header is a nestable block element that contains a Burger, that will be displayed at the responsive breakpoint selected, and a Nav element.
Nav element is nestable, and all the content at the header should be placed here.

Settings controls

Enable Offset: if enabled, Sticky Header will hide when the offset value is reached.
Offset: determines how much distance to scroll to hide the header and to display it again.
Show when going up: if enabled, Sticky Header will display again as soon as the user scrolls up, and hide again when scrolling down.

Offset Animation controls

Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Nav Scroll Style controls

All Nav styles can be applied at it’s style tab. However, you may want to change Nav styles if you have “Show when going up” enabled so that it is legible when scrolling any point at the page.
Offset Scrolling: determines the offset value where Nav styles available at this section will be applied.

Responsive controls

If Responsive is enabled, Nav element will collapsed at the breakpoint selected. There are several collapse animations available: Opacity, From Left (OffCanvas effect) and From Right (OffCanvas effect) and their animation properties can be customized at pleasure.

– Tamu

On this page