Sticky Header
Last updated
Last updated
The Sticky Header feature allows the header to remain fixed at the top of the page while users scroll. This ensures that essential navigation elements and branding are always visible, providing consistent access to menu options and improving the overall browsing experience on longer pages.
To enable the Sticky Header, navigate to Appearance -> Customize -> Header and activate the Sticky Header option. Click on the option to access and adjust its settings.
Our sticky header implementation allows resizing current logo when entering the sticky state, or completely switching the logo to another image.
Custom Logo To display a different image for the sticky header, enable this option and then select or upload your preferred sticky logo image.
Logo Width If you set only the logo width, it will resize the existing site logo when the header becomes sticky. If a custom logo is added, the width will be applied to the new image instead.
This option changes the sticky header behavior to only appear when users scroll up on page within a threshold of 50-100 pixels. To enable it toggle the Auto Hide option.
Animation The animation that shows the header on scrolling up.
Duration The length of animation in seconds.
The sticky header applies transformations when it switches to the sticky state. You can adjust the animation settings using the following options:
Animate on Scroll The animation timeline is controlled by the scrollbar progress. Otherwise it will play animation right after entering the sticky state.
Smooth Transition Applicable when “Animate on Scroll” is enabled; if the scroll speed is fast, the animation will progress more slowly to appear smoother.
Initial Offset Scroll position when sticky header styles begin animation.
The sticky header also includes responsive options, allowing you to enable or disable it for specific devices.
You can apply custom styling for sticky header when it enters the sticky state. Here are the options and their usage:
The container supports standard style options like background, border, and shadow. Padding is applied only to the vertical axis.
Additional elements in the sticky header support styling on sticky state and they are:
Links The colors for the normal, hover, and active states of the menu items.
Text The color settings for other text elements within sticky header.
Pill Background and Color If pill navigation is enabled, you can apply custom pill background and text colors for each state of the navigation.
