Make navbar collapse after click

Bootstrap Studio Help
1

Basically I have two questions. I am using the following extension https://github.com/bootstrapstudio/bootstrap-better-nav#installation

I am using the navbar and it works great, although I cannot get smooth scrolling and close on click to work. I tried it with the following script:

  $(".navbar-nav li a").click(function (event) {
// check if window is small enough so dropdown is created
var toggle = $(".navbar-toggle").is(":visible");
if (toggle) {
  $(".navbar-collapse").collapse('hide');
}
});

It doesnt work. This is my navbar code

<section id="header-hero" style="background-image: url('busy-sidewalk-streets-new-york-footage-009147639_prevstill.jpeg');">
<div id="hero-top">
    <nav class="navbar navbar-light navbar-expand-md navigation-clean-button" id="navbar-top" style="opacity: 1;background: transparent;background-image: none;border-color: transparent;box-shadow: none;">
        <div class="container"><a>scannme</a><button data-toggle="collapse" data-target="#nav" class="navbar-toggler" style="color: rgb(255,255,255);"><span>Toggle navigation</span><span style="font-size: 30px">=</span></button>
            <div
                class="collapse navbar-collapse show" id="nav" style="color: rgb(255,255,255);font-family: Montserrat, sans-serif;font-style: normal;font-weight: normal;">
                <ul class="nav navbar-nav mx-auto">
                    <li role="presentation" class="nav-item"><a href="#how-it-works">how it works</a></li>
                    <li role="presentation" class="nav-item"><a href="#">about us</a></li>
                    <li role="presentation" class="nav-item"><a href="#">privacy</a></li>
                </ul><span><a href="#">log in</a><a href="#"><strong>sign up</strong></a></span></div>
</div>
</nav>
</div>
<div id="hero-bottom"></div>
<h1 class="text-center" id="title">[logo]</h1>
<h1 class="text-center" id="subtitle">txxxxxx</h1>

</section>

2

I used your code and removed the class "show" so the mobile nav defaults to being hidden.

If in your CSS you are overriding the following CSS's transition so that it's either 0 or invalid, you will get no transition effect.

#side-menu {
    width: 300px;
    right: -300px;
    overflow-y: auto;
    z-index: 1035;
    background: #fff;
    padding: 20px 30px;
    color: #333;
    transition: .4s;
}

Otherwise, I had no problem using the code you provided and in my testing the toggle button and the close button functioned correctly.

Saj saj.bss.design