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.

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: 1 comment 1 reply

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: 1 comment · 1 reply

Uh oh!

cookesan Apr 22, 2026

Uh oh!

IArnaut2 Apr 22, 2026 Author

IArnaut2
Apr 21, 2026

Replies: 1 comment 1 reply

cookesan
Apr 22, 2026

IArnaut2 Apr 22, 2026
Author