How can I resolve the issue of the hamburger menu icon collapsing with the nav-items when clicked?
Navbar
<header>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12">
<nav class="navbar navbar-toggleable-md fixed-top d-flex justify-content-center">
<a class="navbar-brand animated heartBeat delay-.5s" href="#home"><img class="img-fluid logo"
src="./Assets/Logos/LogoMakr_8A9Y2n.png" alt=""></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#vesco-menu" aria-controls="vesco-menu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars"
style="color:#fff; font-size: 30px; "></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="vesco-menu">
<div class="navbar-nav nav nav-pills animated fadeInRight delay-1s">
<a class="nav-item nav-link active" href="#home">Home <span
class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#project">portfolios</a>
<a class="nav-item nav-link" href="#skills">skills</a>
<a class="nav-item nav-link" id="downlink" href="./Assets/RESUME.docx"
download>Resume</a>
<a class="nav-item nav-link" href="#testimonials">Testimonials</a>
<a class="nav-item nav-link" href="#contact">CONTACT ME</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>