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.
No description
2 Replies
NotLuksus
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
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
Want results from more Discord servers?
Add your server