Bootstrap – Animated Hamburger Menu

Bootstrap – Animated Hamburger Menu

index.html

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <div class="navbar-toggler-inner"></div>
</button>

main.scss

.navbar-toggler {
    &:focus {
        outline: none;
    }
    border: 1px solid $warning;
    cursor: pointer;
    width: 1.8em;
    height: 1.8em;
    padding: 0 0 0.15em 0.35em;


    .navbar-toggler-inner,
    .navbar-toggler-inner::before,
    .navbar-toggler-inner::after
    {
        width: 1em;
        height: 0.16em;
        background-color: $warning;
        position: absolute;
    }

    .navbar-toggler-inner::before
    {
        content: "";
        display: block;
        top: -0.3em;
    }

    .navbar-toggler-inner::after
    {
        content: "";
        display: block;
        bottom: -0.3em;
    }

    .navbar-toggler-inner{
        transition: 0.2s;
        transform: rotate(0deg);
    }


}



.navbar-toggler.active {

    .navbar-toggler-inner{
        transition: 0.2s;
        transform: rotate(45deg); // 45+360
    }
    .navbar-toggler-inner::before{
        top: 0;
        opacity: 0;
    }
    .navbar-toggler-inner::after{
        bottom: 0;
        transform: rotate(-90deg);
    }



}