Bootstrap 4 navbar-toggler-icon does not appear

Question

Visit: https://jsfiddle.net/8tpm4z00/

<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"> -->

The .navbar-toggler-icon does not appear on the navbar-toggler button when the menu is collapsed for mobile responsiveness.

I have searched about this problem and adjusted the jquery and bootstrap links also. By putting the jquery link above the bootstrap 4 links. But that does not seem to work. The external libraries are linked in my HTML in the same order as the jsfiddle.

Answer 1

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

Answer 2

If you use bootstrap 4 beta:

You can only add the navbar-dark classe in the nav tag.

Result:

<nav class = "navbar navbar-expand-lg navbar-dark fixed-top navbar-default" role = "navigation">      <a class="navbar-brand" href="#">          <img class = "img-responsive logo" src = "~/Content/Images/ogo__160x36.png" alt = "" />      </a>      <button type = "button" class = "navbar-toggler" data-toggle = "collapse" data-target = "#menuPrincipal" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">          <span class = "navbar-toggler-icon"> </ span>      </button>      <div class="collapse navbar-collapse" ...>...</div> </nav> 

Answer 3

if you don't use navbar-light or dark set background-img some image into .navbar-toggler-icon as follow

.navbar-toggler-icon {
background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M47h22M4 15h22M423h22'/%3e%3c/svg%3e);
}

or use fa-bars from font awsome