Solution for Bootstrap Mobile Navbar doesn’t collapse after clicking in the menu options.

Bootstrap v4.3.1

_Layout.cshtml

<button class="navbar-toggler navbar-toggler-right align-self-center" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
                <div class="collapse navbar-collapse col-sm-9 col-md-9 col-lg-9 col-xl-8" id="navbarCollapse" data-toggle="collapse" data-target=".navbar-collapse">

<nav class="navbar navbar-expand-sm fixed-top">
            <div class="container">
                <div class="col-4 col-sm-2 col-md-2 col-lg-2 col-xl-3">
                    <a href="/">
                        <img src="/Images/Icons/Logo.png" class="img-fluid">
                    </a>
                </div>
                <button class="navbar-toggler navbar-toggler-right align-self-center" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
                <div class="collapse navbar-collapse col-sm-9 col-md-9 col-lg-9 col-xl-8" id="navbarCollapse" data-toggle="collapse" data-target=".navbar-collapse" >
                    <div class="flex-column ml-auto">
                        <ul class="navbar-nav float-sm-right">
                            <li class="nav-item @(Request.Url.PathAndQuery.ToString().ToLower().Contains("about-us") ? "active" : "")"> <a class="nav-link" href="#about-us" data-gtag="About Us">Dear Calgary</a></li>
                            <li class="nav-item @(Request.Url.PathAndQuery.ToString().ToLower().Contains("store") ? "active" : "")"> <a class="nav-link" href="#store" data-gtag="Store">Stories</a></li>
                            <li class="nav-item @(Request.Url.PathAndQuery.ToString().ToLower().Contains("participate") ? "active" : "")"> <a class="nav-link" href="#participate" data-gtag="Participate">Participate</a></li>
                            <li class="nav-item @(Request.Url.PathAndQuery.ToString().ToLower().Contains("contact") ? "active" : "")"> <a class="nav-link" href="#contact" data-gtag="Contact">Contact</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://act.calgary2point0.ca/Donate" data-gtag="Donate">Donate</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

CSS – Main.less

.collapsing {
    height: auto !important;
    transition: none !important;
}