javascript – Bootstrap 5 – animate collapse animation on window resize


I am looking to collapse my Bootstrap 5 navigation when the window resizes in the same way it opens or ‘shows’ by default. But the only solution I can figure out is to remove the ‘show’ class on that div with window resize. It works, but the div just closes instantly instead of animates collapsing similar to how it opens by default.

html

<nav class="navbar navbar-expand-md navbar-light position-absolute" role="navigation">
            
<button
    class="navbar-toggler collapsed" 
    type="button" 
    data-bs-toggle="collapse" 
    data-bs-target="#bs-navbar-collapse" 
    aria-controls="navbarToggleExternalContent" 
    aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="toggler-icon top-bar"></span>
    <span class="toggler-icon middle-bar"></span>
    <span class="toggler-icon bottom-bar"></span>
</button>

<div class="collapse navbar-collapse" id="bs-navbar-collapse">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        .... links ...
        </li>
    </ul>
</div>

</nav>

js

$(document).ready(function() { 
  $(window).resize(function() {
    $("#bs-navbar-collapse").removeClass("show"); 
  });
});



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here