Почему мне нужно дважды щелкнуть меню гамбургера, чтобы открыть его?

Question

Я нажимаю на гамбургер, меню выпадает вниз. Я щелкаю выбор (пример: контакт), меню закрывается, и оно прокручивается вниз до раздела контактов (на той же странице). Затем я снова нажимаю кнопку гамбургера (как если бы я хотел пойти в другое место), и ничего очевидного не происходит. Я нажимаю на него второй раз, и на этот раз меню открывается снова.

Я хочу, чтобы он открылся при первом нажатии, очевидно. Вот мой HTML и Javascript. Я использую Bootstrap 4, поэтому любой другой связанный код, вероятно, встроен в Bootstrap.

 <!-- Navbar -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container">
        <div id="home-nav" class="nav-item">
            <div class="nav-link"><img class="logo-name" src=./public/images/logo-name.png alt="Name Logo">
            </div>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav navbar-nav w-100 justify-content-center">
                <li id="portfolio-nav" class="nav-item">
                    <div class="nav-link">Portfolio</div>
                </li>
                <li id="about-nav" class="nav-item">
                    <div class="nav-link">About</div>
                </li>
                <li id="contact-nav" class="nav-item">
                    <div class="nav-link">Contact</div>
                </li>
            </ul>
        </div>
    </div>
</nav>

/////////////////////////

 $('.navbar-collapse div').click(function(){ 
        $('.navbar-collapse').css('height', '0');
        $('.navbar-collapse').removeClass('in');
      });