div sticky header not working in TailwindCSS - css

Question

I'm trying to create a sticky header with TailwindCSS but can't seem to make it work.
I've read the docs and seems that i only need to add sticky top-0 to my div to make it sticky, but it doesn't work.
I've tried to clean up my code as best as I could for the sake of readability, but if you are intrested in the entire code you can find it here.
import { Logo, ToolbarButton, IconLink, Countdown } from "#lib/atoms";
import { faWhatsapp, faFacebook } from "#fortawesome/free-brands-svg-icons";
import {
faHandHoldingHeart,
faHeadphonesAlt,
} from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
export const Toolbar = () => {
return (
<div className="flex flex-col drop-shadow-2xl">
<div className="h-16 flex items-center justify-center bg-rs-secondary">
<div className="container flex justify-between">
<div className="flex gap-4 items-center">
<IconLink
icon={faFacebook}
href="https://www.facebook.com/estereo.sulamita"
/>
<IconLink icon={faWhatsapp} href="https://wa.link/logvtp" />
</div>
<Countdown />
</div>
</div>
{/* I want this div to be sticky */}
<div className="sticky top-0 h-20 flex justify-center bg-white">
<div className="container flex items-center h-full justify-between">
<Logo />
<div className="flex">
<ToolbarButton>Inicio</ToolbarButton>
<ToolbarButton>Videos</ToolbarButton>
<ToolbarButton>Colaboradores</ToolbarButton>
<ToolbarButton
className="group"
hoverBackgroundColor="hover:bg-black"
primary={true}
>
<FontAwesomeIcon
icon={faHandHoldingHeart}
className="group-hover:text-white w-4"
/>
</ToolbarButton>
<ToolbarButton
backgroundColor="bg-rs-primary"
hoverBackgroundColor="hover:bg-black"
textColor="text-white"
primary={true}
>
Reproducir
<FontAwesomeIcon icon={faHeadphonesAlt} className="w-4 ml-3" />
</ToolbarButton>
</div>
</div>
</div>
</div>
);
};
The above code renders the following component:
Also, you can find a deployed version of my app here.
I'd like to achieve something like this with my header component.
Any help is much appreciated.

Answer 1

sticky element should be direct child of the scrollable element.
In your case scrollable element is the root __next container. Basically it means that you need to remove this div <div className="flex flex-col drop-shadow-2xl"> and replace it with React.Fragment so both of your headers, Countdown and second Header, would be direct children of this scrollable div.