Navbar on mobile will not hide after expanding

Bootstrap Studio Help
1

I have the navbar right links component, when the screen is mobile size, it turns into the little pill icon as expected. When I click it and it expands vertically, it will hide again if I select a link. However, if I move out or click out of it, it will not “collapse”. I will only disappear if a select a menu link. Is this normal, is there a fix?

2

You could try this multi user option javascript

var navbarTop;

// Function to check whether the menu should be closed
function shouldCloseMenu() {
  var navCol = document.getElementById('navcol-1');
  
  if (!navCol.classList.contains('show')) return false;
  if (document.querySelector('.navbar').getBoundingClientRect().bottom < 0) return false;

  return true;
}

// Function to close the menu
function closeMenu() {
  var navCol = document.getElementById('navcol-1');
  var bsCollapse = new bootstrap.Collapse(navCol, { toggle: false });
  bsCollapse.hide();
}

// Click event for desktop
document.addEventListener('click', function () {
  if (shouldCloseMenu()) closeMenu();
});

// Touch event for mobile
document.addEventListener('touchstart', function () {
  navbarTop = document.querySelector('.navbar').getBoundingClientRect().top;
}, { passive: true });

document.addEventListener('touchend', function () {
  var currentNavbarTop = document.querySelector('.navbar').getBoundingClientRect().top;

  // Check if navbar is still in view
  if (navbarTop === currentNavbarTop && shouldCloseMenu()) {
    closeMenu();
  }
});

Close me or Scroll me Your choice :frog:

3

thanks, appreciate it. Amazed this is not built-in, maybe having an expanded navbar (in mobile view) that collapses when you click outside, that it should disappear, is not a common request like I think it would be.

4

this worked for me:

    // Navbar show/hide code
    var $navbar = $('#main-nav-bar');
    var $navbarCollapse = $('#navcol-2');
    var togglerClicked = false;
    $('.navbar-toggler').on('click', function() {
        togglerClicked = true;
        Logger.debug('Navbar toggled')
    });
    $navbar.on('mouseleave', function() {
        collapseNavbarIfExpanded();
    });
    // Collapse navbar when a link or button inside it is clicked
    $navbarCollapse.on('click', 'a, button', function() {
        collapseNavbarIfExpanded();
    });
    function collapseNavbarIfExpanded() {
        Logger.debug('Navbar collapse if expanded')
        if (togglerClicked && $navbarCollapse.hasClass('show')) {
            var navbarCollapseInstance = new bootstrap.Collapse($navbarCollapse[0]);
            navbarCollapseInstance.hide();
            togglerClicked = false; // reset the flag
            Logger.debug('Navbar was collapsed')
        }
    }
5

Here’s what I tried that worked, which is generic (I used this in BSS and also a hand-written BS web-page)

  // Wait for the DOM to load
  document.addEventListener("DOMContentLoaded", function () {
    // Get all navigation links
    const navLinks = document.querySelectorAll(".nav-link");
    const navbarToggler = document.querySelector(".navbar-toggler");
    const navbarCollapse = document.querySelector(".navbar-collapse");

    // Add click event listener to each navigation link
    navLinks.forEach(function (link) {
      link.addEventListener("click", function () {
        if (navbarCollapse.classList.contains("show")) {
          navbarToggler.click(); // Simulate a click on the toggler to close the menu
        }
      });
    });

    // Add click event listener to the document
    document.addEventListener("click", function (event) {
      // Check if the clicked element is not part of the menu or the toggler
      if (!navbarCollapse.contains(event.target) && !navbarToggler.contains(event.target)) {
        navbarCollapse.classList.remove("show"); // Hide the menu
      }
    });

    // Add mouseleave event listener to the menu
    navbarCollapse.addEventListener("mouseleave", function () {
      navbarCollapse.classList.remove("show"); // Hide the menu when the mouse leaves
    });
  });