Question 37121 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

close offcanvas navigation bar on a click bootstrap5 – Jquery

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>
Tags:

2

Answers


  1. 0

    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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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).

    Login or Signup to reply.
  2. 0

    No HTML was edited, only the addition of the 3 lines of jquery.

    $("#offcanvasNavbar a").click(function(){
    $('.offcanvas').offcanvas('hide');
});
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search