How to add animation to hamburger menu Bootstrap 4? - html

Question

I am working on a website where I'd like to add an animation to my static navbar from Bootstrap. I want the 3 horizontal bars to change to an X when the button is toggled on mobile viewport.
Note: I am using Bootstrap 4, not 3. Some BS3 classes don't work in BS4
This is what I am trying to accomplish: example. However, I've found multiple tutorials but I am struggling with it. The reason for this is that all those tutorials are based on BS3. BS3 uses the navbar-toggle-class, but BS4 uses the navbar-toggler-class. It's major difference, since the BS4-version contains a viewbox in css:
.navbar-toggler {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
border-color: rgba(0,0,0,.1);
}
And in the bootstrap.min.css the navbar-toggler-class is being used for 11 times. So if I modify this class, it will (probably) break.
HTML of menu:
<div class="container">
<div class="row hidden-lg-up">
<div class="wrapper-right">
<img src="img/placeholders/225x50.png" alt="Logo Company Mobile" class="mobile-only" />
</div>
</div>
<div class="row">
<nav class="navbar navbar-light navbar-full">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<a class="navbar-brand vc-parent" href="#">
<img src="img/placeholders/250x50.png" alt="Logo Company Desktop" class="img-fluid desktop-only" />
</a>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item active align-middle">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item align-middle">
<a class="nav-link" href="#">Item</a>
</li>
<li class="nav-item align-middle">
<a class="nav-link" href="#">Item</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Could anyone point me in the right direction?

Answer 1

Change .navbar-toggler-icon background when menu is opened to
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E");