Currently, I'm in the process of constructing a navigation bar using Bootstrap v4 and have encountered an issue with the collapsing animation in responsive view.
Upon inspection of the specific navigation bar, I noticed that the classes (.in and .show) are present in the same elements when toggling the collapsible content.
Is there a solution to this problem using JavaScript or by overriding the CSS?
For reference, here is the inspection of my navigation bar:
https://i.sstatic.net/34L2h.jpg
Thank you.
EDIT:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark top-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 1</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 2</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 3</a></li>
</ul>
<div class="navbar-nav">
<a class="nav-item nav-link px-3" href="#">SIGN IN</a>
<div class="divider"></div>
<a class="nav-item nav-link px-3" href="#">SIGN UP</a>
</div>
</div>
</nav>
Here is the jsfiddle link to the file: https://jsfiddle.net/Jeffrey_Teoh/4y6n6xt4/11/