How to make navbar sticky in bootstrap 5?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this article, we will use some bootstrap 5 classes to make navbar sticky.

To make navbar sticky, put .sticky-top class to create navbar sticky in bootstrap 5.

Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Table of contents

  • Includes bootstrap 5 view
  • Includes bootstrap 5 library
  • Define its class name

Step 1: Includes bootstrap 5 view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

Step 2: Includes bootstrap 5 library

First of all, load the bootstrap 5 framework CSS into the head tag of your webpage.

<!-- bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 3: Define its class name

After that, create navbar sticky with a class name .sticky-top.

<body style="height:1500px">

  <div class="container-fluid mt-3">
    <br>
    <h3>Sticky Navbar</h3>
    <p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
    <p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>
  </div>

  <nav class="navbar navbar-expand-sm bg-danger navbar-dark sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Sticky top</a>
    </div>
  </nav>

  <div class="container-fluid"><br>
    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch.
      Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag.
      Tote bag cronut semiotics,
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo.
      Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth
      chillwave meditation.
      Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's
      blog.</p>

  </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body style="height:1500px">

  <div class="container-fluid mt-3">
    <br>
    <h3>Sticky Navbar</h3>
    <p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
    <p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>
  </div>

  <nav class="navbar navbar-expand-sm bg-danger navbar-dark sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Sticky top</a>
    </div>
  </nav>

  <div class="container-fluid"><br>
    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch.
      Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag.
      Tote bag cronut semiotics,
      raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo.
      Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth
      chillwave meditation.
      Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's
      blog.</p>

  </div>
</body>

</html>

Check the output of the above code example.

Bootstrap, Navbar, Sticy

Bootstrap, Navbar, Sticy

All the best 👍