How to Fix Sticky Header Not Working in Tailwind CSS & WordPress (AOS Conflict)
If you are building custom WordPress themes using Tailwind CSS, you might have faced a very annoying problem: your sticky header simply refuses to stick to the top!
You check your code, you see that sticky and top-0 are applied perfectly, but it still scrolls away like a normal div. As an agency developer focusing on high-performance custom sites, I run into this issue quite often.
Don’t worry! Today, I want to share a super easy, two-step fix for this common headache. Let’s solve it together.
Why is this happening? The overflow Secret
The position: sticky property is awesome, but it has one very strict rule: it will completely stop working if any parent element has an overflow property set to hidden, scroll, or auto.
When we build responsive sites with Tailwind CSS, we often add overflow-x-hidden to the <body> tag to stop horizontal scrolling on mobile. While this fixes the scrollbar, it instantly breaks your sticky elements!
Also, if you are using the popular AOS (Animate On Scroll) library to make your site look premium, AOS automatically injects overflow-x: hidden into your body tag by default.
How to Fix It (2 Easy Steps)
Here is how you can get your sticky header working perfectly again without breaking your design or animations.
Step 1: Clean up your <body> tag
First, open your header.php file. If you have overflow-x-hidden directly on your <body> tag, you need to remove it.
❌ Don’t do this:
HTML
<body class="bg-slate-50 text-slate-900 overflow-x-hidden">
✅ Do this:
HTML
<body class="bg-slate-50 text-slate-900">
Quick tip: If you still need to hide horizontal overflow, just apply overflow-hidden to your <main> tag instead. As long as your header is outside that <main> tag, it will stay sticky!
Step 2: Override the AOS Library
If you removed the overflow from your body but the header is still not sticking, the AOS library is the hidden culprit. We need to tell CSS to ignore what AOS is doing to our body tag.
Simply open your theme’s style.css file and paste this small code:
CSS
/* Fix for AOS breaking position: sticky */
html,
body {
overflow-x: visible !important;
}
body[data-aos-easing] {
overflow-x: visible !important;
}
By using !important, we are forcing the body to stay visible, which brings our sticky header back to life! Since you are already handling the layout width in your main content blocks, this won’t break your slide-in animations.
🎉 Wrapping Up
That’s it! Just save your files, hard-refresh your browser (Ctrl + F5 / Cmd + Shift + R), and your premium sticky header will be working 100%.