Loading webpages from main menu in desktop view, destroys mobile menu functionality

JavaScript
1

In my website the main menu has two versions: desktop, and mobile (that includes tablets).

Changing a webpage from desktop menu prevents any toggling functionality In mobile menu after resizing the window. The mobile menu will appear opened, and the toggling will just be stuck.

A full refresh location.reload(true) will fix this behavior until next time, but of course, that’s not a solution.

My code:

    document.addEventListener('DOMContentLoaded', ()=>{
    let clicks = 0;
    let menu = document.querySelector('#menu-mainmenu'); // Menu identifier.
    let mainmenuButton = document.querySelector('.mainmenuButton');	// Button class in pagebuilder.
    
document.addEventListener('DOMContentLoaded', ()=>{

	let clicks = 0;
	let menu = document.querySelector('#menu-mainmenu'); // Menu identifier.
	let mainmenuButton = document.querySelector('.mainmenuButton');	// Button class in pagebuilder.

	if (window.innerWidth <= 768) {
		
		menu.style.display = 'none';
		
		mainmenuButton.addEventListener('click', ()=>{
			clicks++;
			if (clicks % 2) {
				menu.style.display = 'block';
			} else {
				menu.style.display = 'none';
			}
		});
	}

	// Cleanups:

	window.addEventListener('resize', ()=>{
		// Must be inside first AEL as well.
		if (window.innerWidth >= 769) {
			clicks = 1; // Prevent double clicking).
			menu.style.display = 'block'; // Prevent display:none of mobile mode.
		}
	});

});

To solve it, I tried:

  1. Using returns in different versions of the code.
  2. Resetting the clicks counter on resize addEvenetListener.
  3. Creating another event listener with an opposite version of the code.
  4. Adding a removeEvenetListener (with named handler functions)
  5. Using else if, with directions for desktop viewport (>=769).

Yet, after resizing to desktop, using the menu, then resizing back to mobile, the mobile menu is stuck.

How could I make sure the mobile menu toggles freely, after I resize and load webpages from the desktop menu?

Please feel free to check my webpage’s code online.

2

Where is the toggling functionality? What link? The responsiveness of the page is good when I stretch and squash the browser.

3

@StevenHu, this is the toggling link:

4

You should be using CSS media queries to hide and show the hamburger and to keep the menu open on wide screens. Then you can just add a click event to show the menu when required.

Don’t use JS to check the window width as you would need to poll it on the resize event otherwise it only works once when loaded or when refreshed. Let css handle the width changes seamlessly with media queries.

Do this instead:

@media screen and (min-width:769px){
 #menu-mainmenu{
	display:block!important;/* important is needed because js writes an inline style and only important trumps it*/
 }
 .mainmenuButton{display:none}
}

@media screen and (max-width:768px){
	.mainmenuButton{display:block;}
	#menu-mainmenu{display:none;}
	
}

Then just remove the resize check from the js.

document.addEventListener('DOMContentLoaded', ()=>{
let clicks = 0;
let menu = document.querySelector('#menu-mainmenu'); // Menu identifier.
let mainmenuButton = document.querySelector('.mainmenuButton');	// Button class in pagebuilder.

	//if (window.innerWidth <= 768) {
		
		menu.style.display = 'none';
		
		mainmenuButton.addEventListener('click', ()=>{
			clicks++;
			if (clicks % 2) {
				menu.style.display = 'block';
			} else {
				menu.style.display = 'none';
			}
		});
	//}
});

The above is tested and working locally.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.