Bootstrap 5 sticky navbars keep navigation visible as users scroll. This page covers 4 sticky navbar patterns — sticky-top, fixed-top, shrink on scroll and transparent to solid — each with working JavaScript.

Quick Setup

Sticky navbars need only Bootstrap 5 CSS for sticky-top. Scroll effects need JS:

<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

ClassWhat It Does
.sticky-topSticks to top when scrolled past
.fixed-topAlways pinned to top of viewport
.fixed-bottomAlways pinned to bottom
position: stickyCSS sticky positioning
top: 0Required for sticky to work
z-index: 1020Bootstrap's default navbar z-index
.shadow-smSubtle shadow on scrolled navbar

1. Bootstrap 5 sticky-top Navbar

The simplest sticky navbar. Sticks to top when scrolled past it. Stays in document flow — no body padding needed.

2. Bootstrap 5 fixed-top Navbar

Always visible at the top using fixed-top. Removed from document flow — add padding-top:56px to body.

3. Bootstrap 5 Navbar Shrink on Scroll

Navbar that shrinks padding and font size when user scrolls down. Common on marketing sites.

4. Bootstrap 5 Transparent to Solid Navbar on Scroll

Navbar starts transparent over a hero image and becomes solid white with shadow when scrolling.

Frequently Asked Questions

sticky-top keeps the navbar in the document flow — it only sticks after you scroll past it, so no body padding is needed. fixed-top removes the navbar from document flow and always pins it to the top, requiring padding-top equal to the navbar height on the body to prevent content going underneath.
Add a scroll event listener: window.addEventListener('scroll', () => { nav.classList.toggle('shadow-sm', window.scrollY > 0); }). Use Bootstrap's shadow-sm utility or a custom box-shadow CSS rule. Toggle it based on window.scrollY to only show the shadow when scrolled.
Set the navbar background to transparent and use text-white on brand and nav-links. Add sticky-top or fixed-top. Use a JavaScript scroll listener to add a solid background class when window.scrollY > threshold. Transition the background color with CSS transition for a smooth effect.
Track scroll direction: let lastScroll = 0; window.addEventListener('scroll', () => { const current = window.scrollY; nav.style.top = current > lastScroll && current > 100 ? '-80px' : '0'; lastScroll = current; }). Add position-fixed and CSS transition: top 0.3s ease to the navbar.
The default Bootstrap 5 navbar height is approximately 56px (3.5rem). Add padding-top: 56px to your body or the first content section. If you've customized navbar padding, measure the actual height with JavaScript: document.querySelector('.navbar').offsetHeight and apply that value.

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.

Related Components

Bootstrap 5 Navbar Example

View examples →

Bootstrap 5 Navbar with Dropdown

View examples →

Bootstrap 5 Hero Section

View examples →