单击移动设备中的项目时折叠导航栏

Question

I have created a landing page for an event. Everything is working fine, but when the navbar is opened in mobile view, it doesn't collapse back when clicked on an item. It stays open covering almost 3/4 of the screen while the page scrolls to the sections finely. I need the nav bar to collapse when an item is clicked.

Here's the HTML for the navbar I've created

    <div id="nav-bar" >
        <nav class="navbar navbar-expand-lg navbar-light" style="background:#2E935D;">
            <a href="#"><img src="assets/images/logonew.png" style="height: 3.35rem; padding-left: 20px;"/></a> <!-- logo on nav bar-->

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"> <a class="nav-link" d onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#home">Home<span class="sr-only">(current)</span></a></li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#info">Info</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#schedule">Schedule</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#rules">Rules</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#about">About</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#register">Register</a> </li>
                    <li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#contact">Contact Us</a> </li>
                    <li class="nav-item"><a style="color: #fff;" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="https://examplelink.com" target="_blank"><i class="fab fa-facebook" style="font-size:30px;"></i></a></li>
                </ul>
            </div>
        </nav>
    </div>

Are there any mistakes or issues in the code? How can I achieve the desired behavior of the navbar? Thank you in advance.

Answer 1

This worked for me

// Close Bootstrap 3 navbar when a nav item is clicked
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
      setTimeout(function () {
         $('.navbar-toggle:visible').click();
      }, 100);
    });

found here . I also had to add a delay.