How to Set Up a Sticky Header in Kadence Free
A sticky header keeps your navigation pinned to the top of the screen as visitors scroll down. It means your menu, logo, and call-to-action buttons are always one click away – no matter how far someone scrolls. And in Kadence, this feature is 100% free. No paid upgrade, no third-party plugin, no code.
But there’s a catch that trips up almost every beginner. The sticky header works fine out of the box, except it doesn’t automatically set a background color for the “stuck” state. If you’re using a transparent header (or even if you’re not), this one missing setting can make your menu text unreadable. I’ll walk through the full setup plus that fix in about 2 minutes.
Here’s the difference it makes – same page, same scroll position. On the left, no sticky header (the navigation is long gone). On the right, sticky enabled – the menu stays pinned and is still one click away:
How Do I Enable the Sticky Header in Kadence?
The setting lives inside the Customizer, right next to your other header options.
- Go to Appearance > Customize > Header > Sticky Header
- Find the dropdown labeled “Enable Sticky Header?”
- Select “Yes – Only Main Row”
- Click Publish to save
That’s the option most sites should pick. It sticks just your logo and main navigation to the top of the screen. Your top bar (if you have one with a phone number or social icons) scrolls away normally.
The other options in the dropdown let you stick the Top Row, the Bottom Row, or the Whole Header. I’d avoid “Whole Header” unless your top bar is very short. Sticking the entire header eats up more screen space, and on smaller laptops that becomes noticeable fast.
Should I Enable the Shrink Effect?
Right below the sticky dropdown, you’ll find an option called “Enable Main Row Shrinking”. When you turn this on, the main row gets smaller once it becomes sticky – the logo shrinks and the padding tightens up.
I’d recommend enabling it. Here’s why:
- It saves vertical screen space. A full-height header hovering over your content feels heavy. The shrunk version is more subtle.
- The transition is smooth. It doesn’t jump or flash – it just quietly reduces in size as you start scrolling.
- It gives visitors a visual signal that the header has switched to its “sticky” state, which feels more intentional than a header that just stays exactly the same.
You can see the difference here. Left is the full-height header at the top of the page (with top bar, logo, and menu). Right is the shrunk sticky state after scrolling – just the main row, tightened up:
The shrink amount isn’t something you can customize in the free version – Kadence handles it automatically. But in my testing, the default shrink ratio looks good on most sites without any tweaking.
What About “Enable Reveal Sticky on Scroll Up”?
This is one of those settings that sounds like jargon until you see it in action. Turn it on and the sticky header only appears when the visitor scrolls back up. As they scroll down (reading your content), the header slides away. Scroll up even slightly, and it slides back in.
I like this option on long-form article pages where you want readers focused on the content, but still want navigation a single scroll-up away. It feels like the header “knows” when they need it.
On ecommerce or landing pages, I’d skip it – you usually want the CTA in the header always visible, not hidden while scrolling down.
Set a Background Color (The Step Most Tutorials Skip)
This is the fix that separates a polished sticky header from a broken-looking one. And almost no tutorial mentions it.
Here’s the problem. When your header becomes sticky, it keeps whatever background it had in its normal state. If your header already has a solid white or dark background, you’re probably fine. But if you’re using a transparent header – where the header overlays your hero image – the sticky state inherits that transparency. Now you’ve got transparent menu text floating over your body content. Unreadable.
Even if you’re not using a transparent header, I’d still set an explicit background color for the sticky state. It prevents odd rendering on some browsers and gives you full control.
Here’s how:
- In the same Sticky Header panel, click the Design tab at the top
- Find Sticky Header Background and click the color swatch
- Pick a solid color – white for light sites, dark gray or black for dark designs, or a brand color if you want the sticky state to feel distinct
That’s the entire fix. Takes about 10 seconds, and it saves you from a header that looks fine at the top of the page but turns into a mess the moment someone scrolls. While you’re in the Customizer, it’s worth checking my other quick wins like adding a back to top button and disabling breadcrumbs on specific pages – all similar 2-minute tweaks.
Should I Use a Sticky Header on Mobile?
Kadence has a separate Mobile Sticky section below the main settings, with its own dropdown. And here you get more than a simple on/off toggle – there are 6 choices:
- No – sticky header disabled on phones
- Yes – Only Main Row – sticks just the main navigation row
- Yes – Top Row & Main Row – sticks both top and main
- Yes – Whole Header – pins every row
- Yes – Only Top Row – sticks just the top bar
- Yes – Only Bottom Row – sticks just the bottom row
On a phone screen, a sticky header takes up roughly 15-20% of the visible area. That’s a lot of screen space lost when your visitor is trying to read an article or browse your products.
My recommendation: set Mobile Sticky to “No” on most sites. Most mobile users are used to scrolling back to the top (or using the browser’s built-in navigation), so a sticky header isn’t as critical as it feels.
The exception is if your main nav holds a critical CTA – like a “Book Now” button on a service business site. In that case, pick Yes – Only Main Row and nothing more. Never use “Whole Header” on mobile unless you enjoy watching half the screen disappear.
Why Isn’t My Sticky Header Working?
If you’ve turned on the sticky header but it doesn’t seem to do anything, check these 3 things before you start troubleshooting CSS or reinstalling Kadence.
1. Your caching plugin is serving a stale page.
This is the most common cause, and it catches people every time. Plugins like LiteSpeed Cache, WP Rocket, and W3 Total Cache store a cached version of your pages. When you enable the sticky header, the Customizer saves the setting – but your visitors (and you, if you’re logged out) still see the old cached version where the sticky JavaScript hasn’t loaded yet.
Fix: Clear your cache. In LiteSpeed Cache, go to LiteSpeed Cache > Toolbox > Purge All. In WP Rocket, click the “Clear Cache” button in the admin bar. Then test your site in an incognito window.
2. You selected the wrong header row.
Kadence’s header has 3 rows: Top, Main, and Bottom. If your logo and menu live in the Main Row but you set the sticky option to “Only Top Row,” nothing visible sticks. Double-check that your sticky setting matches where your navigation actually lives.
3. Another plugin is overriding your header.
Some page builder plugins – especially Elementor with its Theme Builder feature – can replace Kadence’s header entirely with a custom-built one. If you’ve set up an Elementor header template, Kadence’s sticky setting won’t apply because Kadence’s header isn’t even on the page anymore. Check if you have any header/footer override templates active in your page builder.
Free vs Pro: What’s Actually Different?
Here’s the honest breakdown. The free version of Kadence covers sticky headers really well. Most sites won’t need anything more.
Everything I’ve covered in this article – enabling the sticky header, picking which rows stick, enabling the shrink effect, Reveal on Scroll Up, setting the background color, and device-specific controls – all works in Kadence Free. No upgrade needed.
Kadence Pro adds a few advanced extras:
- A completely custom sticky header layout – build an entirely different header for the sticky state (like one with a “Buy Now” button that only appears after scrolling)
- Conditional display rules for Hooked Elements if you want to inject custom sticky content on specific pages only
But for a standard blog, portfolio, or small business site? The free sticky header does everything you need. I’ve been running it on 4 sites without any reason to upgrade just for this feature.
Quick Troubleshooting Reference
| Problem | Likely Cause | Fix |
|---|---|---|
| Header doesn’t stick at all | Caching plugin serving old page | Clear all caches, test in incognito |
| Menu text unreadable when scrolling | No background color on sticky state | Set a color in Design tab |
| Header sticks but nothing visible | Wrong row selected (Top vs Main) | Match sticky setting to your menu’s row |
| Takes up too much space on phone | Sticky enabled on mobile | Set Mobile Sticky dropdown to No |
| Sticky works but looks jumpy | CSS conflict or layout shift | Check for custom header CSS or theme overrides |
| Transparent header stays transparent when sticky | Sticky inherits transparent background | Set explicit background in Sticky Header > Design |
Frequently Asked Questions
Does a Kadence sticky header affect page speed or Core Web Vitals?
The sticky header itself adds minimal overhead – it’s just a CSS position: sticky rule with a small JavaScript handler for the shrink effect. But it can cause CLS (Cumulative Layout Shift) if the header height changes when it becomes sticky. Enabling the shrink effect and setting an explicit background color keeps things smooth.
Can I make only part of my header sticky in Kadence?
Yes. Kadence gives you 5 “Yes” options in the Enable Sticky Header dropdown – Only Main Row, Top Row & Main Row, Whole Header, Only Top Row, and Only Bottom Row. Most sites should stick only the Main Row – that’s where your logo and navigation live.
What does the “Reveal Sticky on Scroll Up” option do?
With this option on, the sticky header only appears when the visitor scrolls back up. It stays hidden while scrolling down, which keeps the reading experience clean, and reappears the moment they scroll up to look for navigation. Great for long-form articles, less useful for conversion-focused pages.
Does the Kadence sticky header work with Elementor?
Only if you’re using Kadence’s native header. If you’ve built a custom header with Elementor’s Theme Builder, Kadence’s sticky header setting won’t apply because Elementor replaces Kadence’s header entirely. You’d need to use Elementor’s own sticky option instead.
Can I set a different logo for the sticky state?
In the Sticky Header panel there’s a “Different Logo for Stuck Header?” option. Turn it on and you can upload a separate logo that only appears once the header is sticky. It’s useful for sites with long horizontal logos that don’t scale well when the header shrinks – you can swap to a compact version for the sticky state.
Wrapping Up
Setting up a Kadence sticky header takes about 2 minutes. Enable the main row sticky option, turn on Main Row Shrinking, and set a background color for the sticky state. That third step – the background color – is what separates a header that actually works from one that frustrates your visitors.
And the best part? Every feature I covered here is available in the free version of Kadence. You don’t need Kadence Pro for a fully functional sticky header.
If you’re in the Customizer tweaking your header, it’s a good time to clean up other visual details too. Changing the footer copyright text is another 2-minute job that makes your site look more polished. Small touches add up.
