よく見るハンバーガーメニューのエフェクトは以下のサイトでまとめてくれている。
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

このサイトの通りにやれば普通に実装出来るのだが、Bootstrapを使っているならJavaScriptを記述する必要はなくなる。
ただcssの.actionとなっているところをnot:(collapsed)に変更する必要がある。

html

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-inverse p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-inverse bg-inverse">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </nav>
</div>

scss

.navbar-toggler-wrapper{
  padding:7px;
}
.navbar-toggler {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: $brand-primary;
    border-radius: 4px;
    &:nth-of-type(1) {
      top: 0;
    }
    &:nth-of-type(2) {
      top: 15px;
    }
    &:nth-of-type(3) {
      bottom: 0;
    }
  }
  position: relative;
  width: 38px;
  height: 35px;

  &:focus {
    outline: none;
  }
  //エフェクト部分
  &:not(.collapsed) span {
    &:nth-of-type(1) {
      -webkit-transform: translateY(15px) rotate(-45deg);
      transform: translateY(15px) rotate(-45deg);
    }
    &:nth-of-type(2) {
      opacity: 0;
    }
    &:nth-of-type(3) {
      -webkit-transform: translateY(-15px) rotate(45deg);
      transform: translateY(-15px) rotate(45deg);
    }
  }
}