Reactjs and tailwindcss make NavBar sticky does not work

Question

I'm trying to make my Navbar sticky on top of my browser using Tailwindcss. I understand that the sticky property should be added on the first child of the root component, which is why I've added it on the App.jsx file.

See code below:

const App = () => ( <div className="bg-primary w-full overflow-hidden "> <header className="sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center"> <div className="xl:max-w-[1280px] w-full"> <Navbar /> </div> </header> <div className="bg-primary flex justify-center items-start"> <div className="xl:max-w-[1280px] w-full"> <Hero /> </div> </div> <div className="bg-primary sm:px-16 px-6 flex justify-center items-center"> <div className="xl:max-w-[1280px] w-full"> <Block1/> <Block2 /> <Block3 /> <Footer /> </div> </div> </div> );

However the navbar still gets moving out of the visible browser space once I scoll down. I tried the fixed property, but in this case the navbar is not anymore centered and justified.

How can I get this navbar to remain sticky on top ?

tahsin_siad · Accepted Answer · 2023-01-24 09:09:01Z

You can do like this:

const App = () => ( <div className="bg-primary w-full overflow-hidden relative"> <header className="fixed top-0 z-50 sm:px-16 px-6 flex justify-center items-center"> <div className="xl:max-w-[1280px] w-full"> <Navbar /> </div> </header> <div className="bg-primary flex justify-center items-start"> <div className="xl:max-w-[1280px] w-full"> <Hero /> </div> </div> <div className="bg-primary sm:px-16 px-6 flex justify-center items-center"> <div className="xl:max-w-[1280px] w-full"> <Block1/> <Block2 /> <Block3 /> <Footer /> </div> </div> </div> );

OR,

just removed the overflow-hidden from parent div.

const App = () => ( <div className="bg-primary w-full"> <header className="sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center"> <div className="xl:max-w-[1280px] w-full"> <Navbar /> </div> </header> <div className="bg-primary flex justify-center items-start"> <div className="xl:max-w-[1280px] w-full"> <Hero /> </div> </div> <div className="bg-primary sm:px-16 px-6 flex justify-center items-center"> <div className="xl:max-w-[1280px] w-full"> <Block1/> <Block2 /> <Block3 /> <Footer /> </div> </div> </div> );

Thanks, would you be able to explain why the overflow-hidden conflicts with the sticky property? I don't want scrolls to appear if I get some text overflowing, especially on mobile displays
Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It’s like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that’s not always desirable. Original link: css-tricks.com/dealing-with-overflow-and-position-sticky

Collectives™ on Stack Overflow

Reactjs and tailwindcss make NavBar sticky does not work

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related