Bootstrap 5.3.8: Hamburger icon does not show in the navbar #42346

IArnaut2 · 2026-04-21T19:49:53Z

IArnaut2
Apr 21, 2026

I added Bootstrap links to the layout Blade template file and I made the navbar like in this page https://getbootstrap.com/docs/5.3/components/navbar/#toggler.

<!DOCTYPE html>
<html lang="sr" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title layout:title-pattern="$CONTENT_TITLE | $LAYOUT_TITLE">Student Nekretnine</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <style>
      #logo {
        height: 48px;
        filter: invert();
      }

      html, body {
        height: 100%;
      }
    </style>
  </head>

  <body class="d-flex flex-column">
      <!-- Navbar -->
      <nav class="navbar navbar-expand-md bg-success sticky-top mb-3 mx-0 py-0">
        <div class="container-fluid">
          <a class="navbar-brand" th:href="@{/oglasi}">
            <img class="d-block" id="logo" alt="Logo" th:src="@{/images/logo.png}">
          </a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggler" aria-controls="#toggler" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="toggler">
            <ul class="navbar-nav me-auto">
              <li class="nav-item btn btn-success px-md-1 py-md-3">
                <a class="nav-link fw-semibold text-light" th:href="@{/oglasi}">Oglasi</a>
              </li>
              <li class="nav-item btn btn-success px-md-1 py-md-3">
                <a class="nav-link fw-semibold text-light" th:href="@{/oglasi/postavka}">Novi oglas</a>
              </li>
            </ul>

Hamburger icon does not show in the navbar.

cookesan · 2026-04-22T05:43:39Z

cookesan
Apr 22, 2026

The markup is missing the navbar color mode for a dark/colored background.

In Bootstrap 5.3, add data-bs-theme="dark" to the .navbar when you use a dark background such as bg-success:

<nav class="navbar navbar-expand-md bg-success sticky-top mb-3 mx-0 py-0" data-bs-theme="dark">
  ...
  <button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#toggler"
    aria-controls="toggler"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

data-bs-target needs the #, but aria-controls should be just the id value. Also make sure the Bootstrap JS bundle is loaded if the collapse opens/closes incorrectly; the icon visibility itself is mostly the navbar theme/CSS variables.

1 reply

IArnaut2 Apr 22, 2026
Author

Unfortunately, not even adding data-bs-theme="dark" to the navbar worked.

Lopesnextgen · 2026-06-13T03:48:51Z

Lopesnextgen
Jun 13, 2026

Hey Igor,

This no longer looks like a navbar color issue

The screenshot shows that the toggler button itself exists and has the correct dimensions. Only the three lines are missing.

Bootstrap does not render those lines as HTML. .navbar-toggler-icon receives an encoded SVG through the CSS variable --bs-navbar-toggler-icon-bg.

Open DevTools, select .navbar-toggler-icon, and run:

const icon = document.querySelector('.navbar-toggler-icon');
getComputedStyle(icon).backgroundImage;
getComputedStyle(icon).getPropertyValue('--bs-navbar-toggler-icon-bg');

Check the result

If the value is none or empty, another stylesheet is overriding Bootstrap's rule or variable.
If it contains data:image/svg+xml, check the browser console for a Content Security Policy error.
If the Bootstrap CSS request failed, check the Network tab for an SRI, CSP, or CDN error.

A restrictive policy such as img-src 'self' will block Bootstrap's embedded data: SVG. This exact behavior has previously been reported in Bootstrap:

#39040

The fact that data-bs-theme="dark" made no difference makes a blocked or overridden background image especially likely.

CSP-friendly solution

Instead of weakening an intentional CSP, replace Bootstrap's background image with an inline SVG:

<button
  class="navbar-toggler text-light"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#toggler"
  aria-controls="toggler"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <svg
    width="30"
    height="30"
    viewBox="0 0 30 30"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M4 7h22M4 15h22M4 23h22"></path>
  </svg>
</button>

This uses currentColor, so text-light makes the lines visible without relying on Bootstrap's encoded background image.

One additional detail: the discussion title says Bootstrap 5.3.8, but the stylesheet shown in the code is 5.3.7. That mismatch is probably not the cause, but it is worth testing with the exact CSS and JS bundle from the same version.

Also keep:

data-bs-target="#toggler"
aria-controls="toggler" without #
aria-label="Toggle navigation"

The Bootstrap JavaScript bundle controls whether the menu opens. It does not draw the icon itself.

References:

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Bootstrap 5.3.8: Hamburger icon does not show in the navbar #42346

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

Bootstrap 5.3.8: Hamburger icon does not show in the navbar #42346

Uh oh!

Uh oh!

IArnaut2 Apr 21, 2026

Replies: 2 comments · 1 reply

Uh oh!

cookesan Apr 22, 2026

Uh oh!

IArnaut2 Apr 22, 2026 Author

Uh oh!

Lopesnextgen Jun 13, 2026

This no longer looks like a navbar color issue

Check the result

CSP-friendly solution

IArnaut2
Apr 21, 2026

Replies: 2 comments 1 reply

cookesan
Apr 22, 2026

IArnaut2 Apr 22, 2026
Author

Lopesnextgen
Jun 13, 2026