Migrating a Bootstrap 3 Navbar to Bootstrap 4.6 (Step-by-Step)

Fixing navbar, navbar-inverse, and navbar-fixed-top after upgrading to Bootstrap 4.6.0.

Why your navbar broke

Bootstrap 4.6 changed navbar classes and markup from Bootstrap 3. Classes like navbar-inverse and navbar-fixed-top were renamed, and elements like .navbar-header and .icon-bar were removed. Here’s a concise plan to get your header working again.

1) Update your includes (JS order matters)

Bootstrap 4 requires Popper for dropdowns/tooltips. Use jQuery 3.x (non-slim if you rely on AJAX).

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>

Tip: If you need AJAX or $.animate features, switch to the full jQuery build:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2) Class & markup swaps (cheat sheet)

Bootstrap 3	Bootstrap 4.6 replacement
navbar-inverse	navbar-dark bg-dark (or navbar-light bg-light)
navbar-fixed-top	fixed-top
navbar-fixed-bottom	fixed-bottom
navbar-toggle	navbar-toggler
.icon-bar spans	remove; use <span class="navbar-toggler-icon"></span>
navbar-right	ml-auto
navbar-left	mr-auto
.nav > li	.nav-item
.nav > li > a	.nav-link
.navbar-header	remove; put brand directly inside .navbar
navbar-form	form-inline (+ spacing utilities)
.dropdown-menu > li > a	.dropdown-item

Also choose a responsive behavior: add navbar-expand-sm, -md, -lg, or -xl to control when your nav stops collapsing.

3) Before/After navbar markup

Old (Bootstrap 3)

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav">
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="mainNav" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

New (Bootstrap 4.6)

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>

    <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-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 ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="menu1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Menu
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

4) Prevent content hiding under a fixed navbar

Bootstrap 4 doesn’t auto-offset for fixed-top. Add body padding:

body { padding-top: 56px; } /* adjust if your navbar is taller */

5) Common gotchas

• Toggler icon invisible? Make sure you use navbar-light or navbar-dark — they provide the background image for .navbar-toggler-icon.
• Dropdowns not opening? Check that Popper is included and your script order is jQuery → Popper → Bootstrap.
• Right-aligned menu: Replace navbar-right with ml-auto on .navbar-nav.
• Glyphicons removed: Swap to Font Awesome or another icon set.
• Affix plugin removed: Use .sticky-top or a small custom script.

6) Quick action checklist

1. Update CSS/JS to Bootstrap 4.6 + jQuery 3.x + Popper.
2. Replace navbar-inverse → navbar-dark bg-dark, navbar-fixed-top → fixed-top.
3. Remove .navbar-header; place the brand directly inside .navbar.
4. Replace the toggler: navbar-toggle → navbar-toggler + navbar-toggler-icon.
5. Convert items to .nav-item > .nav-link; right-align with ml-auto.
6. Update dropdowns to use .dropdown-menu and .dropdown-item.
7. Add body { padding-top: 56px; } for fixed headers.
8. Test collapse, dropdowns, and scroll on mobile & desktop.

Have a stubborn legacy navbar? Paste your old markup into a scratch page and apply the swaps above line-by-line. It’s usually a 10–15 minute refactor.