🧱 Bootstrap 5 Sticky Footer & Sticky Navbar – Keep Navigation & Info Always Visible
🧲 Introduction – What Are Sticky Footers & Navbars?
Sticky elements in Bootstrap 5 help you anchor important components like footers or navbars so they remain visible while scrolling. This improves usability for navigation, CTAs, and site-wide context.
🎯 In this guide, you’ll learn:
- How to create a sticky footer that stays at the bottom
- Make navbars sticky to the top of the viewport
- Use
.fixed-top,.sticky-top,.mt-auto, and layout helpers - Combine full-height layout strategies with flexible positioning
✅ Example 1 – Sticky Navbar (Fixed to Top)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
| Class | Purpose |
|---|---|
.fixed-top | Pins navbar to top of viewport |
.navbar-expand-lg | Expands navbar on large screens |
.ms-auto | Pushes nav links to the right |
📌 Ideal for always-visible site navigation on desktops and mobile.
✅ Example 2 – Sticky Navbar with Scroll Behavior
<nav class="navbar navbar-light bg-light sticky-top shadow-sm">
<div class="container">
<a class="navbar-brand fw-bold" href="#">StickyNav</a>
</div>
</nav>
| Class | Description |
|---|---|
.sticky-top | Sticks navbar only after it reaches top |
.shadow-sm | Adds subtle drop shadow for visibility |
📌 Use when you want the navbar to scroll with content before sticking.
✅ Example 3 – Sticky Footer at Bottom of Short Pages
<!DOCTYPE html>
<html lang="en" class="h-100">
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<div class="container py-5">
<h1>Page Content</h1>
<p>This is the main section of your page.</p>
</div>
</main>
<footer class="footer mt-auto py-3 bg-dark text-white text-center">
<div class="container">
<span>© 2025 MySite. All rights reserved.</span>
</div>
</footer>
</body>
</html>
| Class | Function |
|---|---|
.h-100 | Sets full height on <html> and <body> |
.flex-column | Aligns content vertically with flex |
.mt-auto | Pushes footer to bottom of viewport if short |
📌 Ensures footer stays at bottom even with minimal content.
✅ Example 4 – Sticky Sidebar + Sticky Navbar Combo
<div class="d-flex flex-column vh-100">
<nav class="navbar navbar-dark bg-primary sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky Combo</a>
</div>
</nav>
<div class="container-fluid flex-grow-1">
<div class="row">
<aside class="col-md-3 d-none d-md-block bg-light p-3 sticky-top" style="top: 56px;">
<h6>Sidebar Menu</h6>
</aside>
<main class="col-md-9 py-4">
<p>Main content area that scrolls independently.</p>
</main>
</div>
</div>
</div>
| Feature | Usage |
|---|---|
| Sticky Sidebar | .sticky-top with adjusted top value |
| Sticky Navbar | .sticky-top on nav with default height |
| Layout Grid | .row, .col-md-* for side + main view |
📌 Useful for dashboard layouts or admin panels with fixed navigation areas.
📘 Bootstrap Sticky Utilities Reference
| Use Case | Utility Class | Description |
|---|---|---|
| Sticky Navbar | .sticky-top / .fixed-top | Anchors navbar to top of page |
| Sticky Footer | .mt-auto, .flex-column | Pushes footer down using vertical flex |
| Full Height Page | .h-100, .vh-100 | Enables sticky layout across full height |
| Sticky Sidebar | .sticky-top, top-* | Fixes sidebar while main content scrolls |
🛠️ Best Practices for Sticky Layouts
| Tip | Why It Helps |
|---|---|
Use .h-100 and .flex-column | Ensures full-height layout for sticky footers |
Use top: 56px; on sticky sidebar | Adjusts for navbar height in stacking context |
| Add shadows to sticky navs | Makes fixed nav stand out visually |
| Test on mobile devices | Ensure sticky elements don’t overlap content |
| Avoid sticky overload | Too many sticky items can reduce UX clarity |
📌 Summary – Recap & Next Steps
Sticky navbars and footers in Bootstrap 5 offer simple ways to maintain access to important content as users scroll. With flexbox and utility classes, you can craft responsive, full-height layouts for all use cases.
🔍 Key Takeaways:
- Use
.fixed-topfor persistent navbars - Use
.sticky-topfor scroll-activated sticky behavior - Implement
.mt-autoto anchor footers in flexible layouts - Combine sticky elements carefully for the best user experience
⚙️ Ideal for navigation headers, admin layouts, help pages, and eCommerce sites.
❓ FAQs – Bootstrap 5 Sticky Footer & Navbar
❓ What’s the difference between .fixed-top and .sticky-top?
✅ .fixed-top pins the element immediately, while .sticky-top only sticks once scrolled into view.
❓ How do I make sure the sticky footer works on short pages?
✅ Wrap your layout in .d-flex.flex-column.h-100 and apply .mt-auto on the <footer>.
❓ Does sticky positioning work on all browsers?
✅ Yes, modern browsers support it well. Always test on mobile and Safari for smooth behavior.
❓ Can I combine sticky navbars with offcanvas menus?
✅ Yes. Sticky navbars can still toggle offcanvas menus using Bootstrap’s JavaScript.
Share Now :
