Bootstrap 4 Navbar-Toggler-Icon Does Not Appear

Bootstrap 4 navbar-toggler-icon does not appear

Update:

navbar-inverse is no longer available in B4 version, you can use navbar-dark instead.

Use navbar-inverse bg-inverse instead of .navbar-default

<section role="navigation">
  <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->

    <div class="container">

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>

      <a href="#" class="navbar-brand">KP</a>

      <div class="collapse navbar-collapse" id="myNavigation">
          <div class="navbar-nav">
            <a class="p-3 nav-item nav-link active " href="#">Home</a>
            <a class="p-3 nav-item nav-link " href="#">About</a>
            <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
          </div><!-- <div class="navbar-nav"> -->
      </div><!-- <div class="collapse navbar-collapse"> -->

    </div><!-- <div class="container"> -->

  </nav>
</section>

Updated fiddle

Bootstrap 4 navbar toggler not showing

@mlegg, your toggler icon isn't toggling as a result of the id attribute not having the same value as the data-toggler attribute on your button. The code below shows what it should be.

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


<div class="collapse navbar-collapse" id="navbarCollapse">

As for the styling of the toggle icon, you can with the following code:

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

For a thorough understanding of what's happening here, checkout @ZimSystem's answer in this stack overflow question. Ultimately, you have to set the value of the stroke property in the URL of the background-image like so:

stroke='rgba(255,255,255, 1)'

Checkout this codeply project

Bootstrap navbar-toggler-icon not visible but functioning normally

Try using navbar navbar-light instead of navbar navbar-inverse.

Bootstrap 4 is a major rewrite of the older Bootstrap and this was changed

Bootstrap Migration guide

Bootstrap 5 navbar-toggler-icon does not appear

Here you go... Remove position-absolute from the <button>.

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <button class="navbar-toggler d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <div class="navbar-nav">
      <div class="nav-item text-nowrap">
        <a class="nav-link px-3" href="#">Sign out</a>
      </div>
    </div>
  </header>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                <!-- <span data-feather="home"></span> -->
                Link ?
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <!-- <span data-feather="file"></span> -->
                Link ?
              </a>
            </li>
          </ul>

          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</span>
            <a class="link-secondary" href="#" aria-label="Add a new report">
              <!-- <span data-feather="plus-circle"></span> -->
            </a>
          </h6>
          <ul class="nav flex-column mb-2">
            <li class="nav-item">
              <a class="nav-link" href="#">
                <!-- <span data-feather="file-text"></span> -->
                Report 1
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <!-- <span data-feather="file-text"></span> -->
                Report 2
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <%= yield %>
      </main>

    </div>
    <!--/ .row -->
  </div>
  <!--/ .container-fluid -->

</body>

</html>

Toggler Icon disappears when making bootstrap navbar transparent

Add one of the required classes to the #fondo navigation, so the svg from bootstrap can be loaded correctly.

In your case, most likely:

<nav id="fondo" class="navbar navbar-expand-lg fixed-top">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav id="fondo" class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: rgba(0, 0, 0, 0.2);">

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

</nav>

<div style="height:1000px"></div>

Bootstrap 4 Navbar-Toggler-Icon Does Not Appear