A
Anonymous

Navbar - Copy this React, Tailwind Component to your project

The aside does not remain on one place when I scroll , the height of the navbar is 16 normally , but it did not work even with a large value , help me make the aside content to always stay on one place . If you understand the layout I am requesting please help me: import AsideContent from "./components/AsideContent"; import Footer from "./components/Footer"; import MainSection from "./components/MainSection"; import Navbar from "./components/Navbar"; function App() { return ( <div className="min h screen text white"> <div className="grid grid cols 1 lg:grid cols [260px,1fr,1fr,1fr] grid rows [auto,1fr] min h screen"> <Navbar className="col span full sticky top 0 z 50" /> <AsideContent className="hidden lg:block lg:sticky top 24" /> <MainSection className="lg:col span 3" /> </div> <Footer /> </div> ); } export default App;

Prompt
Component Preview

About

Navbar - A sticky, responsive navigation bar with a height of 16, professionally built with React and Tailwind. Perfect for seamless scrolling. Start coding now!

Share

Last updated 1 month ago