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?
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();
}
});
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.
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')
}
}
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
});
});