How to create fa-bars animated menu

You provided the code you found online but none of the code from your theme or header.php or wherever it is that your hamburger menu launcher exists… …so, I’ll do my best…

It’s most likely in your header.php, before the navigation is called, that you’ll find a link of some sorts…

<a id="mobile-nav" href="#"><i class="fa fa-bars"></i></a>

That’s just a guess, so it may be a button instead or something to that effect. Essentially what you’re looking for is the element that has the <i class="fa fa-bars"></i> nested within it.

In that element, you’ll want to replace the <i class="fa fa-bars"></i> with the following (using my guess above)…

<a id="mobile-nav" href="#">
     <div class="container" onclick="myFunction(this)">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
     </div>
</a> 
<script>
function myFunction(x){
     x.classList.toggle('change');
}
</script>

Once that’s in place, go to your theme’s style.css and add the following:

.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
. change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}

I’d provide something more specific but without seeing the code you’re adding this to or the code you’re modifying this is the best I can do.