Sticky Header not working in NextJS and Tailwind

Answered

California pilchard posted this in #help-forum

California pilchardOP

2023-06-24T15:35:52.000Z

I try to put my Header Component in a sticky position with Tailwind but isnt working. There is my layout.tsx where I add the header.tsx component :

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
          className={cn(
            "h-screen flex flex-col bg-background font-sans antialiased",
            fontSans.variable
          )}
        >
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
            <div className="grid lg:grid-cols-5 flex-1 overflow-hidden">
              <Sidebar className="hidden lg:block" />
              <div className="col-span-3 lg:col-span-4 lg:border-l overflow-auto">
                <Header className='' />
                {children}
              </div>
            </div>
            <Navbar className='block lg:hidden'/>
          </ThemeProvider>
        </body>
    </html>
  )
}

Answered by Sohel Shekh

Try giving "top-0" and "z-10" or so, on the div with "sticky" class

View full answer

8 Replies

California pilchardOP

2023-06-24T15:35:55.000Z

There is my header.tsx component :

export function Header({ className }: HeaderProps) {
    const pathname = usePathname()
    return (
        <header className={cn("sticky flex min-h-fit justify-between items-center py-4 px-4 lg:h-header lg:py-0", className)}>
            <div className="flex flex-col gap-4 w-full items-center lg:w-fit lg:flex-row">
                <div className="hidden gap-4 lg:flex">
                    {/* NAVIGATION BUTTON */}
                    <Button variant={'ghost'} size={'icon'} className="rounded-full">
                            <ChevronLeft />
                        </Button>
                        <Button variant={'ghost'} size={'icon'} className="rounded-full">
                            <ChevronRight />
                    </Button>
                    {/* PAGE TITLE */}
                    
                </div>
                {pathname === '/search' && (
                    <Input type="search" placeholder="Search" />
                )}
            </div>
            <div className="hidden lg:block">
                <UserNav />
            </div>
        </header>
    )
}

Thx for ur help