How to create fixed navbar in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Fixed Navbar in Bootstrap Quickly

To create a fixed navbar in Bootstrap, add the navbar class along with fixed-top or fixed-bottom to your <nav> element. This keeps the navbar fixed at the top or bottom of the viewport while scrolling.

📐

Syntax

Use the navbar class to create a navigation bar. Add fixed-top to fix it at the top or fixed-bottom to fix it at the bottom of the page. Include navbar-expand classes for responsiveness and bg-light or other background classes for styling.

html

<nav class="navbar fixed-top navbar-expand-lg bg-light">
  <!-- Navbar content here -->
</nav>

💻

Example

This example shows a fixed top navbar with a brand name and a toggle button for small screens. The navbar stays visible at the top when you scroll the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fixed 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 fixed-top navbar-expand-lg navbar-light bg-light">
  <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="margin-top: 80px; padding: 20px;">
  <h1>Welcome to MySite</h1>
  <p>Scroll down to see the fixed navbar stay at the top.</p>
  <p style="height: 1500px;">Content goes here...</p>
</div>

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

Output

A webpage with a light-colored navbar fixed at the top showing 'MySite' brand and navigation links. The navbar stays visible when scrolling down the page.

⚠️

Common Pitfalls

Not adding enough top margin or padding to the page content causes the fixed navbar to cover it.
Using fixed-top without Bootstrap's CSS or JS files loaded will not work.
Forgetting to include the responsive toggle button can make the navbar unusable on small screens.

html

<!-- Wrong: No margin on body, navbar covers content -->
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>
<div>
  <h1>Content</h1>
  <p>Content is hidden behind navbar.</p>
</div>

<!-- Right: Add margin-top to body or container -->
<style>
  body { margin-top: 56px; }
</style>

📊

Quick Reference

Use these classes to fix your navbar:

Class	Description
navbar	Base class for Bootstrap navbar
fixed-top	Fixes navbar to the top of the viewport
fixed-bottom	Fixes navbar to the bottom of the viewport
navbar-expand-lg	Makes navbar responsive, expands on large screens
bg-light	Applies light background color
navbar-light	Styles navbar for light backgrounds

✅

Key Takeaways

Add fixed-top or fixed-bottom class to navbar to fix its position.

Always add top margin or padding to page content to avoid it being hidden behind the fixed navbar.

Include Bootstrap CSS and JS files for the navbar to work correctly.

Use responsive classes like navbar-expand-lg and toggle button for mobile-friendly navigation.