Bootstrap 5 fixed navbars stay visible as users scroll. This page covers 4 fixed navbar patterns — basic fixed-top, dark admin navbar, shrink on scroll and auto-hide on scroll down.
Quick Setup
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.fixed-top | Always pinned to viewport top |
.fixed-bottom | Always pinned to viewport bottom |
.sticky-top | Sticks after scrolling past it |
position:fixed | CSS fixed positioning |
top:0 | Required for fixed positioning |
z-index:1030 | Bootstrap navbar z-index default |
1. Bootstrap 5 fixed-top Navbar
Navbar always pinned to the top of viewport. Requires padding-top on body equal to navbar height.
2. Bootstrap 5 Dark Fixed Navbar
Dark fixed-top navbar with transparent search field and notification icon.
3. Bootstrap 5 Navbar Shrink on Scroll
Fixed navbar that reduces padding and adds shadow after scrolling 50px.
4. Bootstrap 5 Navbar Hide on Scroll Down
Navbar that hides when scrolling down and reappears when scrolling up.
Frequently Asked Questions
fixed-top uses position:fixed — the navbar is always visible at the top regardless of scroll position, but is removed from document flow, requiring padding-top on the body. sticky-top uses position:sticky — the navbar scrolls with the page until it reaches the top, then sticks. sticky-top stays in document flow so no body padding is needed.
The default Bootstrap 5 navbar height is approximately 56px. Add padding-top:56px to your body element. If you have custom padding on the navbar, measure the actual height: document.querySelector('.navbar').offsetHeight. Set that value as the body padding-top.
Track the previous scroll position. On each scroll event compare current vs previous: if current > previous and current > threshold, add a class that sets top:-80px with transition. If current < previous, remove the class. The CSS transition animates the show/hide.
Not on the same navbar. But you could have a fixed-top announcement bar and a sticky-top main navbar. The fixed-top bar stays always visible and the sticky-top navbar sticks after the user scrolls past the announcement bar.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.