Bootstrap 5 Navbar Collapse upon blur not working

Question

As a beginner project, I am trying to code a site navbar using Bootstrap 5. Currently, after clicking on and expanding the navbar, it does not collapse when I click away. I want to program it such that the navbar will automatically collapse once I click away.

However, my current implementation does not work and I don't understand why.

document.addEventListener("DOMContentLoaded",function() {
    document.querySelector(".navbar-toggler").addEventListener("blur", function (event) {
        var screenWidth = window.innerWidth;
        if (screenWidth < 768) {
            document.querySelector("#navbarNav").collapse;
        }
    });
});

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
            <img width="30" height="30" src="https://static.thenounproject.com/png/3040233-200.png">
            App
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="navbar-nav">
                <a class="nav-link" href="index.html">Home</a>
                <a class="nav-link" href="app-db.html">Discover</a>
                <a class="nav-link" href="#">Manage</a>
            </div>
        </div>
    </div>
</nav>

What do you mean "click away"? Do you mean you want the mobile menu to collapse after clicking on one of the nav-links? [Like this](https://stackoverflow.com/a/42401686/171456)? — Carol Skelly, Feb 10 '21 at 11:45

score 0 · Answer 1 · answered Nov 19 '21 at 14:58

I have done it this way:

    document.body.addEventListener('click', (() => {        
    let toggle = document.getElementById('navbar-toggler')
      if (!toggle.classList.contains('collapsed')) {
        const bsCollapse = new bootstrap.Collapse(menuToggle)
        bsCollapse.toggle()            
      }
    }), true)

Alex Gill · Accepted Answer · 2021-03-29T20:08:39.653

You can use Bootstrap custom events to achieve this.

Example: https://codepen.io/alexpetergill/pen/b7a0e508af4b447a7d240a55d616d1e1

  const $navbarNav = $("#navbarNav");
  if ($navbarNav) {
    const navbarNavCollapse = (event) => {
      if (!$navbarNav.is(event.target) && $navbarNav.has(event.target).length === 0) {
        $navbarNav.collapse('hide');
        document.removeEventListener("mouseup", navbarNavCollapse);
      }
    }

    $navbarNav.on("shown.bs.collapse", () => {
      document.addEventListener("mouseup", navbarNavCollapse);
    });
  }

Note: this is using ES6 syntax for certain things so you will need to change this if not using a transpiler!

Bootstrap 5 Navbar Collapse upon blur not working

2 Answers2