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

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

Home Forums Support Animating Hamburger Icon out of sync with secondary menu activation

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1263078
    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.addEventListener( 'click', function( e ) {
            		hamburger.classList.toggle("is-active");
    		} );
    	};
    
    	for ( var i = 0; i < menuItems.length; i++ ) {
    		menuItems.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 );
    	}
    #1263622
    David
    Staff
    Customer Support

    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

    #1270232
    Jonathan

    Thanks that worked, nicely.

    #1270340
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.