close offcanvas navigation bar on a click bootstrap5

user_19311032 0
Viewed 43

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>
bootstrap-5 css jquery javascript
1 Answers

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).

user_41234000
Related