Problem with menu

Hi,

This problem will be resolved within two weeks.
Please wait for the update.

Thanks for the Feedback.

Hi CeeWP,

Did you ever find a fix for this?

I’ve got the Theme installed, and have also made a few custom edits to it. Loving it so far – it’s been really easy to use.

I also have the issues that the OP had on Mobile devices with the Menu link expanding, but not collapsing, and also when clicking on the parent items the child items don’t expand.

Any help would be greatly appreciated ??

Thanks,

To fix collapsable menu I made 2 changes. First disabled whole event for button with menu-toggle class. This was whole section from navigation.js starting from line 40 (or something):

button.onclick = function() {

Note: looks like clicks on menu-toggle class buttons are handled somewhere else in code and it just interferes.

second thing was to add event handling to submenu toggle link. Whole code is pure js (just to keep convention of navigation.js) and didn’t require any changes to any other files.

First added toggle function to start of navigation.js:

function toggleElement(el) {
	if (el.style.display == 'none' || el.style.display == '') {
		el.style.display = 'block';
	} else {
		el.style.display = 'none';
	}
 }

second added click event listener to first link inside any element with children (indicated by class ‘menu-item-has-children’):

container.querySelector('.menu-item-has-children > a').addEventListener('click', function(event) {
		event.preventDefault();
		var submenus = this.closest('.menu-item-has-children').querySelector('ul.sub-menu');
		if (submenus instanceof Array) {
			Array.prototype.forEach.call(submenus, function(el, i) {
				toggleElement(el);
			});
		} else {
			toggleElement(submenus);
		}
	});

It might not be the best way to fix it, but it works. Maybe autor could review this code and include those changes into project.

Hi Paulina,

Thanks for your help, but I’m still having some difficulties.

Are you able to please copy / paste your entire navigation.js code for me please?

of course ??

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
 function toggleElement(el) {
	if (el.style.display == 'none' || el.style.display == '') {
		el.style.display = 'block';
	} else {
		el.style.display = 'none';
	}
 }

( function() {
	var container, button, menu;

	container = document.getElementById( 'site-navigation' );
	if ( ! container ) {
		return;
	}

	button = container.getElementsByTagName( 'button' )[0];
	if ( 'undefined' === typeof button ) {
		return;
	}

	menu = container.getElementsByTagName( 'ul' )[0];

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	menu.setAttribute( 'aria-expanded', 'false' );

	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += ' nav-menu';
	}

	// zakomentowane, bo najwyrazniej menu-toggle ma jeszcze inny handler bazujacy na atrybutach uzytych ponizej
	// button.onclick = function() {
		// if ( -1 !== container.className.indexOf( 'toggled' ) ) {
			// container.className = container.className.replace( ' toggled', '' );
			// button.setAttribute( 'aria-expanded', 'false' );
			// menu.setAttribute( 'aria-expanded', 'false' );
		// } else {
			// container.className += ' toggled';
			// button.setAttribute( 'aria-expanded', 'true' );
			// menu.setAttribute( 'aria-expanded', 'true' );
		// }
	// };
	container.querySelector('.menu-item-has-children > a').addEventListener('click', function(event) {
		event.preventDefault();
		var submenus = this.closest('.menu-item-has-children').querySelector('ul.sub-menu');
		if (submenus instanceof Array) {
			Array.prototype.forEach.call(submenus, function(el, i) {
				toggleElement(el);
			});
		} else {
			toggleElement(submenus);
		}
	});
} )();

ok, so I made bug in previous navigation.js edition. I was using only one submenu and it was fine. It couldn’t work with more than one.

Author might not like this solution as it uses jQuery, but I was not patient enough to write it in vanilla JS. So below is new, working code to replace adding event listener to selector.

So instead of:
container.querySelector('.menu-item-has-children > a').addEventListener('click', function(event) { ... });

There is:

// it was much easier to write in jQuery than vanilla JS
	jQuery('.menu-item-has-children > a', container).on('click', function(e) {
		e.preventDefault();
		e.stopPropagation();

		var $parentLi = jQuery(this).closest('li');
		$parentLi.siblings('li').find('ul:visible').hide();
		$parentLi.find('ul.sub-menu').stop().toggle();
	});

Thank you ??

Will have a go at implementing now

Hi there,

I’ve made all the changes to navigation.js file and it is not working. I’ve emailed the theme author too.

The menu expands OK on smaller screens, but when you press the menu ‘button’ again to collapse the menu, there is a style attribute being added to the ul id=”primary-menu” which prevents the menu from hiding.

<ul id="primary-menu" class="menu nav-menu" aria-expanded="false" style="display: block;">

Sub menu item is an interesting one. I’ve got a list of sub-pages that sit under one section in the site. That section page should not be visible, or browsable however. So using the menu I’ve setup a custom link with a # a href value, and added the relevant children pages underneath this. The sub-menu UL does not appear – it just uses the # link instead of expanding/collapsing the menu.

Any help would be hugely appreciated ??

Thanks,

OK – please ignore my last post. It seems to be working now – I think there was just a problem with caching. :S

Thanks a lot!