Bootstrap 5 Sticky Header

Q: 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.

Q: 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.

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.

Bootstrap class

.sticky-top

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 and classes

Variant	Description and classes	Classes
Sticky navbar	Scrolls with the page, then sticks to the top.`navbar sticky-top`	`navbar sticky-top`
Fixed navbar	Always pinned; add top padding to the body.`navbar fixed-top`	`navbar fixed-top`
Sticky from a breakpoint	Only sticks on large screens.`sticky-lg-top`	`sticky-lg-top`
With shadow	Separates the header from the content.`sticky-top shadow-sm bg-body`	`sticky-top shadow-sm bg-body`

Code example

HTML

<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

Scroll inside the frame: the navbar stays pinned with sticky-top while the sections move underneath.

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.