How to create sticky navbar in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Sticky Navbar in Bootstrap Easily

To create a sticky navbar in Bootstrap, add the sticky-top class to your <nav> element. This class makes the navbar stick to the top of the page when you scroll down, keeping it always visible.

📐

Syntax

Use the sticky-top class on the <nav> element that contains your navbar. This class applies CSS to fix the navbar at the top when scrolling.

<nav class="navbar sticky-top">: The navbar container with sticky behavior.
navbar: Bootstrap's base navbar styling.
sticky-top: Makes the navbar stick to the top on scroll.

html

<nav class="navbar sticky-top">
  <!-- Navbar content here -->
</nav>

💻

Example

This example shows a simple Bootstrap navbar that stays fixed at the top of the page when you scroll down. The sticky-top class is added to the <nav> element.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sticky Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div style="height: 1500px; padding: 20px;">
  <h2>Scroll down to see the sticky navbar in action</h2>
  <p>This space is to create scroll so you can see the navbar stay fixed at the top.</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A blue navbar with brand 'MySite' and menu items 'Home', 'Features', 'Pricing' stays fixed at the top of the page when scrolling down the tall content below.

⚠️

Common Pitfalls

Some common mistakes when creating a sticky navbar in Bootstrap include:

Forgetting to add the sticky-top class to the <nav> element.
Using fixed-top instead of sticky-top, which fixes the navbar permanently and may cover content.
Not adding enough page height to see the sticky effect in action.
Missing the Bootstrap CSS or JS files, so styles or toggles don't work.

Remember, sticky-top keeps the navbar visible only after you scroll past it, unlike fixed-top which always stays fixed.

html

<!-- Wrong: fixed-top always sticks and may cover content -->
<nav class="navbar fixed-top bg-primary">
  <!-- content -->
</nav>

<!-- Right: sticky-top sticks only after scrolling -->
<nav class="navbar sticky-top bg-primary">
  <!-- content -->
</nav>

📊

Quick Reference

Sticky Navbar Classes in Bootstrap:

sticky-top: Makes navbar stick to top after scrolling past it.
fixed-top: Fixes navbar at top always, may cover content.
navbar: Base navbar styling.
navbar-expand-lg: Makes navbar responsive with toggle on small screens.
bg-primary: Adds blue background color.

✅

Key Takeaways

Add the sticky-top class to your navbar's

Use sticky-top instead of fixed-top to avoid covering page content.

Ensure Bootstrap CSS and JS files are included for styles and responsive toggles.

Test with enough page height to see the sticky effect in action.

sticky-top works by sticking the navbar only after you scroll past it.