[Resolved] Animating Hamburger Icon out of sync with secondary menu activation

[Jonathan]

I’ve been using this code for animating the hamburger for off canvas menu opening and closing states. I recently activated the secondary menu and the animation has suddenly gone out of sync. i.e When the icon animated to close the off canvas menu the hamburger shows the closed hamburger?

// Animated Hamburger Menu

	var hamburger = document.querySelector(".hamburger"),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' ),
		closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' );

	menuToggle.addEventListener("click", function() {
		hamburger.classList.toggle("is-active");
	} );
	
	for ( var i = 0; i < closeElements.length; i++ ) {
		closeElements[i].addEventListener( 'click', function( e ) {
        		hamburger.classList.toggle("is-active");
		} );
	};

	for ( var i = 0; i < menuItems.length; i++ ) {
		menuItems[i].addEventListener( 'click', function( e ) {
			var closest_nav = this.closest( 'nav' );
			if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) {
				var url = this.getAttribute( 'href' );
				var hash = url.split('#')[1];

				// Open the sub-menu if the link has no destination
				if ( hash ) {
					e.preventDefault();
					hamburger.classList.toggle("is-active");
				}
			}
		}, false );
	}

[David]

Hi there,

adding the Secondary Nav adds a second menu-toggle element to your site.

Try changing your menuToggle variable from .menu-toggle to .main-navigation .menu-toggle

[Jonathan]

Thanks that worked, nicely.

[David]

You’re welcome

[Author]

Posts