Bootstrap 4 navbar-toggler-icon does not appear

Visit:

<div> <button type="button" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">KP</a> <div> <div> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact Me</a> </div><!-- <div> --> </div><!-- <div> -->
</div><!-- <div> -->

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.

4 Answers

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> <nav><!-- navbar-inverse --> <div> <button type="button" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">KP</a> <div> <div> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact Me</a> </div><!-- <div> --> </div><!-- <div> --> </div><!-- <div> --> </nav>
</section>

Updated fiddle

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 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 ...>...</div>
</nav>

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=' stroke-miterlimit='10' d='M47h22M4 15h22M423h22'/%3e%3c/svg%3e);
}

or use fa-bars from font awsome

Use navbar-dark instead for navbar-inverse and bg-dark also instead of bg-inverse

 <nav>