Theo's Typesafe Cult•12mo ago

Bottom Navbar

Hi, everyone. I am trying to make bottom navigation bar, but when i scroll page to the bottom - it overlaps on text/components. How can i make it visible all the time, but to not overlap on other items at the bottom of the page? tl;dr like a regular navbar at the top, but at the bottom stackblitz: https://stackblitz.com/edit/stackblitz-starters-bm1fj6?file=app%2Fpage.tsx pastebin: https://pastebin.com/XGsgYDsv Thank you in advance 🙂 btw, im using react (nextjs) and tailwindcss

Pastebin

bottomNavbarProblem - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

2 Replies

NotLuksus•12mo ago

I'm not sure what you are trying todo, if you dont make it sticky, so overlap while scrolling, the user has to scroll all the way to the bottom to get to the navbar

Matvey•12mo ago

I usually use something like this

const RootLayout = ({ children }: IRootLayoutProps) => {
  return (
    <html lang="en">
      <body
        className={`${inter.className} dark h-full max-h-screen flex flex-col justify-between overflow-hidden`}
      >
        <main className="flex-1 overflow-auto">{children}</main>
        <Navbar />
      </body>
    </html>
  );
};

const RootLayout = ({ children }: IRootLayoutProps) => {
  return (
    <html lang="en">
      <body
        className={`${inter.className} dark h-full max-h-screen flex flex-col justify-between overflow-hidden`}
      >
        <main className="flex-1 overflow-auto">{children}</main>
        <Navbar />
      </body>
    </html>
  );
};

remove fixed from the navbar and h-screen from the page component for this to work

Gaming

Programming

Bottom Navbar