Bootstrap 5Navigation

Bootstrap 5 Sticky Header

A sticky header is a navigation bar that remains fixed at the top of the viewport as the user scrolls down the page. Bootstrap 5 achieves this with the `sticky-top` utility class, which uses `position: sticky` to keep the navbar in view without breaking document flow. Use it on content-heavy pages where users need constant access to navigation links, search, or calls to action.

Primary Class

.sticky-header

Common Use Cases

→E-commerce product listing pages where the cart icon and category nav need to stay accessible while browsing hundreds of items
→Long-form documentation or blog posts where readers should be able to jump to other sections without scrolling back to the top
→SaaS dashboards with a top navbar containing user account controls, notifications, and app-wide search that must always be reachable
→Landing pages with a persistent call-to-action button (such as 'Start Free Trial') that should remain visible as visitors read through features and pricing

Variants & Classes

Variant	Description	Classes
Sticky Header Default	Standard sticky header with Bootstrap's default styling.	`sticky-header`
Sticky Header Responsive	Responsive variant that adapts to different screen sizes.	`sticky-header sticky-header-responsive`

Code Example

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">Momentum</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#features">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#pricing">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
      </ul>
      <a href="#signup" class="btn btn-primary ms-lg-3">Get Started</a>
    </div>
  </div>
</nav>

Live Examples

Basic Sticky Header

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated sticky header with custom colours
✓Sticky Header with interactive states
✓Responsive sticky header for all screen sizes

Best Practices

Use sticky-top over fixed-top to preserve document flow

The `fixed-top` class uses `position: fixed`, which removes the navbar from document flow and causes content to slide underneath it. You then need to add manual top padding to the body. The `sticky-top` class uses `position: sticky`, which avoids this problem entirely because the element still occupies space in the layout until it reaches the scroll threshold.

Add a subtle shadow to signal stickiness visually

Once the navbar sticks, users benefit from a visual cue that separates it from page content. Apply Bootstrap's `shadow-sm` class directly on the navbar element to add a consistent bottom shadow without writing custom CSS.

Account for sticky header height when using anchor links

If your sticky navbar is 64px tall and you use in-page anchor links like `href='#pricing'`, the target section will scroll behind the header. Fix this by adding `scroll-margin-top: 80px` (slightly more than your header height) to each anchor target section using a small CSS rule or an inline style.

Set a z-index explicitly if you have modals or dropdowns

Bootstrap sets `z-index: 1020` on `sticky-top` by default, but custom components like sidebars or overlays can override this. If dropdowns appear behind other elements, add a custom `z-index` value above 1020 directly on the navbar in your stylesheet.

FAQ

What is the difference between sticky-top and fixed-top in Bootstrap 5?

`sticky-top` uses CSS `position: sticky`, meaning the navbar behaves like a normal block element until the user scrolls past it, then it locks to the top. Because it stays in the document flow, no extra body padding is needed. `fixed-top` uses CSS `position: fixed`, which always keeps the navbar at the top of the viewport but removes it from the document flow, causing underlying content to render as if the navbar does not exist. This typically requires adding `padding-top` equal to the navbar height to the body element to prevent content from being hidden beneath it.

How do I change the background colour of a sticky header on scroll using Bootstrap 5?

Bootstrap 5 does not include a built-in scroll-triggered class change, but you can add a small JavaScript snippet that listens for the `scroll` event and toggles a class on the navbar. For example, add `window.addEventListener('scroll', () => { document.querySelector('.navbar').classList.toggle('bg-white', window.scrollY > 50); });`. You can also use Bootstrap's own utility classes like `bg-transparent` as the default state and swap to `bg-white shadow-sm` once the user scrolls past a threshold, giving a clear visual transition from a transparent hero section to a solid sticky header.

How does Canvas Builder handle sticky header generation?

Canvas Builder automatically applies the `sticky-top` class along with responsive collapse behaviour and the correct `data-bs-` attributes when you request a sticky navigation component. It incorporates your brand colours into the `navbar-brand` text and CTA button, generates a mobile-friendly hamburger toggle for smaller viewports, and outputs clean, valid HTML that works immediately without any additional configuration.