Bootstrap 5.0 Hamburger menu icon doesn't show up

Question

experts - I'm trying to solve what I think should be a simple issue. I'm looking at https://getbootstrap.com/docs/5.0/components/navbar/#toggler and trying to implement the hamburger menu that shows up when the window is narrow (e.g. phone screen). When I make the window narrow, the button is still invisible. When I move the mouse to where the menu should be, the cursor turns into the pointer. When I click it, the button's outline becomes bold (so I can see it), and the drop down menu shows up. However, the hamburger menu icon is still invisible. What am I doing wrong? I feel like I pretty much copied the code verbatim from the documentation.

<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />

    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
      integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
      integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand me-auto" style="margin-left: 20px" href="#"
          >Example Name</a
        >

        <button
          class="navbar-toggler bg-light"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#"
                >Option 1</a
              >
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Option 3</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

kiranvj · Accepted Answer · 2021-01-26T03:39:13.350

You are missing class navbar-light here

<nav class="navbar navbar-expand-lg bg-light">

it should be

<nav class="navbar navbar-expand-lg navbar-light bg-light">

This is the Bootstrap class definition in _navbar.scss

.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}

Example

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  <title>Hello, world</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand me-auto" style="margin-left: 20px" href="#">Example Name</a
        >

        <button
          class="navbar-toggler bg-light"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#"
                >Option 1</a
              >
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Option 3</a></li>
      </ul>
    </div>
    </div>
  </nav>
</body>

</html>

Update

where did you find _navbar.scss, and how did you know to look there?

I used the Chorme dev tools to find it. The below image explains how I found the missing class and the filename in which the class is mentioned. The file can be accessed in the Bootstrap Github source. Background image is mentioned here

...wouldn't have thought that navbar-light would control anything but the color scheme of the navbar, let alone whether an icon appears somewhere in it

Icon depends on the navbar background for better visibility. Thats why its dependent on navbar-light

If you don't mind me asking, where did you find _navbar.scss, and how did you know to look there? I looked at the documentation linked in the OP, and wouldn't have thought that navbar-light would control anything but the color scheme of the navbar, let alone whether an icon appears somewhere in it. — Charles Yu, Jan 26 '21 at 02:42

Bootstrap 5.0 Hamburger menu icon doesn't show up

1 Answers1

Related