A sticky header is a great asset for a website because it keeps menus, logos, and call-to-action buttons visible at all times as readers read scroll-down pages. This makes it easier for users to navigate without needing to scroll back up.
A sticky header improves user experience, boosts engagement, and reinforces brand visibility. It also provides a more seamless, professional appearance, particularly on long pages. However, it should be well-designed to avoid obstructing content or affecting performance and should be avoided on mobile devices.
Activating A Sticky Header
Kadence offers built-in options for sticky headers, making it easy to implement without coding. Here’s a step-by-step guide:
Customizing A Sticky Header
1. Enable your sticky header and choose your sticky method.
2. Kadence provides three options to customize the sticky header behavior, these are:
3. When you have set your preferences, go to the Design Tab and make your customizations.
4. With the Kadence Pro, you can take advantage of more advanced features such as sticky on scroll up only, sticky header for mobile only, and Sticky header for individual pages or posts (via Kadence Elements and conditional headers).
5. Kadence allows you to set different sticky header behaviors for desktop, tablet, and mobile devices. You can control these settings by toggling the device preview options (desktop, tablet, and mobile) at the bottom of the customizer screen. As we’ve already covered, we do not recommend mobile devices using sticky headers.
6. Once you have configured the sticky header to your liking, click the Publish button to save your changes.
NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.
