Next.js Discord

Discord Forum

Difficulty configuring the css of my Layout NextJS App with Tailwind

Unanswered
Pacific herring posted this in #help-forum
Open in Discord
Pacific herringOP
Well, my problem is not specific to NextJS, but I just can't figure out how to solve it. So here's the code:
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
          className={cn(
            "h-screen w-screen flex flex-col bg-background font-sans antialiased",
            fontSans.variable
          )}
        >
          <UserProvider>
            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
              <div id="id1" className="grid lg:grid-cols-5 h-full overflow-hidden">
                <Sidebar className="hidden border-r lg:block h-full bg-red-200" />
                <div id="id2" className="relative col-span-3 lg:col-span-4 overflow-y-auto">
                  <Header className='fixed top-0 z-[50] bg-background flex items-center w-full'/>
                  <div id="id3" className=' bg-red-700 py-4' >
                    {children} {/* PAGE CONTENT */}
                  </div>
                </div>
              </div>
              <Navbar className=' z-[50] fixed w-full bottom-0 lg:hidden'/>
              {/* <ToastContainer 
                position='top-center' 
                theme='colored'
                autoClose={3000} 
                hideProgressBar={false} 
                pauseOnHover={false}
                draggable
                closeOnClick
              /> */}
            </ThemeProvider>
          </UserProvider>
        </body>
    </html>
  )
}


I have a body where I set the height to 100vh and the width to 100vw to ensure that the display is limited to the screen. Then, within the body, there are two elements:
- DIV (id:1)
- Navbar, only visible on mobile and tablet devices
So far, so good. The issue arises in the...

7 Replies

Pacific herringOP
Something like this :
Well my sidebar is correctly positionned in the left side, with full height of the screen. She is only visible on desktop (large screen). Now inside the id2 there is the problem
The first problem is on the header. Im looking for a layout like this on desktop :
And on mobile :
First problem, how can I prevent the content of the page from going below the header and navbar? I was using the sticky position for the header and navbar, but on iPhones, for example, only the fixed position displays correctly
And secondly when I put my header in fixedposition with w-full he go to far in the right like this
Pacific herringOP
No one got an idea ?