Toggler com HTML, CSS e JS.

index.html

<!-- Dentro da Navbar-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#minhaNavBar">
  <div class="toggler-btn">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
  </div>
</button>

script.js

$(document). ready(function(){
  
  $('.navbar-toggler').click(function(){
    $('.navbar-toggler').toggleClass('.change')
  });
  
})

style.css

.toggler-btn {
    border: 2px solid #black;
    padding: 5px;
    transition: all 1s ease;
}

.bar {
    width: 30px;
    height: 3px;
    margin: 5px;
    background: #blue;
    transition: all 0.5s ease;
}

.change .bar1 {
    transform: rotate(45deg) translate(8px, 5px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(-45deg) translate(6px, -3px);
}

toggler-com-html-css-e-js.markdown

Toggler com HTML, CSS e JS.

A Pen by Felipe Marques on CodePen.

License.