jQuery Function to Toggle Bootstrap Icon Bar Animation Does Not Work

Question

I have set a function on the toggle button to transition the Bootstrap Icon Bars into an "X" shape on click. However, this does not seem to work. Any help is greatly appreciated. Pressing it result in nothing. Below is the CSS of just one bar for a simple example.

$(document).ready(function () {
              $(".pro-toggle").on("click", function () {
                    $(".top-bar").toggleClass("active");
              });
        });

.pro-toggle .active .top-bar {

.pro-toggle.top-bar {
  transform: rotate(0);
}
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle collapsed pro-toggle pull-left" data-toggle="collapse">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>

</button>

Answer 1

.pro-toggle .active .top-bar

Your jQuery is toggling a class on the .top-bar element but it doesn't match with your CSS rule.

Set the .active class to the .top-bar element like this

CSS

.pro-toggle .top-bar {
  transform: rotate(0);
}
.pro-toggle .top-bar.active 
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

LESS / SASS

.pro-toggle .top-bar {
  transform: rotate(0);

  &.active {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
}

Answer 2

check it https://jsfiddle.net/bq794gL7/ May be problem in your css?

  .pro-toggle.top-bar {
     transform: rotate(0);
  }

  .pro-toggle  .top-bar.active {
     transform: rotate(45deg);
     transform-origin: 10% 10%;
   }