close offcanvas navigation bar on a click bootstrap5

Question

It is about a project created with Bootstrap 5. The problem was that the offcanvas menu stayed open, by clicking an anchor link.

how can I close offcanvas menu after click on a anchor link.

 <nav class="navbar  fixed-top py-5 ">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">

                        <img src="photo.jpeg" alt="Image"
                            class=" image img-fluid rounded-circle position-absolute top-100 start-50 translate-middle ">

                    </a>
                    <div style="position: fixed; width: 100%; z-index: 1;">
                        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    </div>
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
                        aria-labelledby="offcanvasNavbarLabel">
                        <div class="offcanvas-header">
                            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Index</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body">
                            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                                <li class="nav-item">
                                    <a class="nav-link active" aria-current="page"  href="#Home" >Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#service-section">Services</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#work-section">Works</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#contact-section">Contact</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#moreinfo-section">More Info</a>
                                </li>

                            </ul>

                        </div>
                    </div>
                </div>
            </nav>
        

Answer 1

Here is one possible solution.

 const navLinks = document.querySelectorAll('.nav-item'); const menuToggle = document.querySelector('#offcanvasNavbar'); navLinks.forEach((elem) => { elem.addEventListener('click', () => { $("button.navbar-toggler").click(); }); });

 <script src="https://code.jquery.com/jquery-1.6.4.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"></link> <nav class="navbar fixed-top py-5 "> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="photo.jpeg" alt="Image" class=" image img-fluid rounded-circle position-absolute top-100 start-50 translate-middle "> </a> <div style="position: fixed; width: 100%; z-index: 1;"> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Index</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#Home" onclick="close_offcanvas()">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#service-section">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#work-section">Works</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact-section">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#moreinfo-section">More Info</a> </li> </ul> </div> </div> </div> </nav>

The html is unchanged except for the top 3 lines (and removing an extra </div> at the bottom).