New to Bootstrap Studio, problem compressed menu defaults to open

Hi all,

New to Bootstrap Studio, problem compressed menu defaults to open

Problem

  • created functioning menu, however when in mobile view the menu stayed open after selecting item
  • to fix that I figured out some javascript to close on click the menu item, that worked however it caused another problem
  • now on first visit in mobile view, or transition from wide screen view to mobile view the menu is now defaulting to open.
  • it is disappointing when first viewing as the open menu covers the part of the page and makes a poor user experience.
  • I do not know enough Bootstrap Studio or java to overcome this problem

see below


2 Capture

Please Help, thanks

If you give the navbar an ID=myNav , then you can try this script

(function() {
	"use strict";
	const myNav = document.querySelector('#myNav');
	if (myNav) {
		const navbarCollapse = myNav.querySelector('.navbar-collapse');
		const navbarItems = navbarCollapse.querySelectorAll('a');
		if (navbarCollapse) {
			const collapse = new bootstrap.Collapse(navbarCollapse, {toggle: false});
			navbarItems.forEach(item => item.addEventListener('click', () => collapse.hide()));
		}
	}
})();
1 Like

Thank you, I tried it out. Works great, I appreciate the help.

I was a little quick when I answer you, if you add a dropdown to your navbar the code above will make you disappointment. It will collapse the menu when an user click the dropdown.

clickable dropdown

(function() {
	"use strict";
	const myNav = document.querySelector('#myNav');
	if (myNav) {
		const navbarCollapse = myNav.querySelector('.navbar-collapse');
		const navbarItems = navbarCollapse.querySelectorAll('a');
		if (navbarCollapse) {
			const collapse = new bootstrap.Collapse(navbarCollapse, {toggle: false});
			navbarItems.forEach(item => item.addEventListener('click', e => {
				if (!e.target.matches('a[data-bs-toggle]')) collapse.hide();
			}));
		}
	}
})();

if you want the dropdown to open the menu when hover

hover dropdown with CSS

only on desktop or bigger

@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }
}

@media all and (min-width: 992px) {
  .navbar .nav-item:hover .nav-link {
  }
}

@media all and (min-width: 992px) {
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }
}

@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
}

or if you want to do it with Javascript

hover dropdown with javascript

only on desktop or bigger

function() {
	"use strict";
	const myNav = document.querySelector('#myNav');
	if (myNav) {
		const navbarCollapse = myNav.querySelector('.navbar-collapse');
		const navbarItems = navbarCollapse.querySelectorAll('a');
		if (navbarCollapse) {
			const collapse = new bootstrap.Collapse(navbarCollapse, {
				toggle: false
			});
			navbarItems.forEach(item => item.addEventListener('click', e => {
				if (!e.target.matches('a[data-bs-toggle]')) collapse.hide();
			}));
		}
		document.addEventListener("DOMContentLoaded", function(){
			if (window.innerWidth > 992) {
				document.querySelectorAll('.navbar .nav-item').forEach(function(navitem){
					navitem.addEventListener('mouseover', function(){
						let el_link = this.querySelector('a[data-bs-toggle]');
						if(el_link != null){
							let nextEl = el_link.nextElementSibling;
							el_link.classList.add('show');
							nextEl.classList.add('show');
						}
					});
					navitem.addEventListener('mouseleave', function(){
						let el_link = this.querySelector('a[data-bs-toggle]');
						if(el_link != null){
							let nextEl = el_link.nextElementSibling;
							el_link.classList.remove('show');
							nextEl.classList.remove('show');
						}
					});
				});
			}
		});
	}
})();
1 Like

Thank you again. I appreciate it. Have a good day.

Another CSS hover dropdown effect (for desktop) that gives a nice fade/expand effect…

@media (min-width: 992px) {
  .navbar .dropdown .dropdown-menu  {
    transition: all .3s ease-in;
    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
  }
}
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu  {
    max-height: 100vh;
    opacity: 1;
  }
}
1 Like

thank you for that, I will try it out in the future.