如何在Boogle的Toogle按钮中插入汉堡动画？

Question

我正在使用Bootstrap 4.1.1 ，并且在其中 navbar中有一个切换按钮（Hamburger菜单） ...

但是在CSS中，我将图标的位置设为绝对位置，并且图标从按钮中浮出。。

如何使其保留在按钮内而没有“挥舞” 图标？

*请记住，单击菜单菜单上的图标时，该图标是css动画，它将变成“ X” ...

HTML和JS：

<button type="button" id="nav-toggle" class="btn btn-nav-toogle al-bg-dark-grey py-5 py-sm-2 ml-3 ml-sm-0 shadow mr-3 mr-sm-5" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle Navigation"><span></span></button>

document.querySelector( "#nav-toggle" )
  .addEventListener( "click", function() {
    this.classList.toggle( "active" );
  });

CSS：

.btn-nav-toogle span, 
.btn-nav-toogle span:before, 
.btn-nav-toogle span:after {
  height: 5px;
  width: 35px;
  background-color: var(--aliansce-green);
  position: absolute;

  display: block;
  content: '';
}

.btn-nav-toogle span:before {
  top: -10px; 
}
.btn-nav-toogle span:after {
  bottom: -10px;
}

.btn-nav-toogle span, 
.btn-nav-toogle span:before,
.btn-nav-toogle span:after {
  transition: all 500ms ease-in-out;
}

.btn-nav-toogle.active span {
  background-color: transparent;
}
.btn-nav-toogle.active span:before, 
.btn-nav-toogle.active span:after {
  top: 0;
}
.btn-nav-toogle.active span:before {
  transform: rotate(45deg);
}
.btn-nav-toogle.active span:after {
  transform: rotate(-45deg);
}