html – navbar collapse icon – x animation-ThrowExceptions

Exception or error:

I want to animate the navbar-toggler icon to make it an “X” when the menu is open.
This is my HTML:

<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
    <a class="navbar-brand logo p-3" href="#">PROJECT<br>21</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto pr-5 nav__links">
            <li class="nav-item active">
                <a class="nav-link" href="#">HOME</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">STATUS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">TEST</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">TEST</a>
            </li>
        </ul>
    </div>
</div>
</nav>

This is the only CSS I have to the navbar:

.logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
}

li {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

.nav__links li {
  padding: 0px 20px;
}

How can I do this with HTML, bootstrap and CSS?
Any help is greatly appreciated!

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *