[Resolved] Animated Hamburger Problem

Hi there,

sorry for the delay, this topic slipped through the net.

See this line in the script:

menuItems = document.querySelectorAll('nav ul a')

What happens if you change it to:

menuItems = document.querySelectorAll('nav ul li:not(.menu-item-has-children) > a')

Nothing you did wrong.
It just needed tweaking to your sites needs ie. the sub menu parent items having just a # link.

Oh no 🙂
can you share a link to where i can see this ?

Hi there,

Can you share the full javascript code that you’re using now so I can take a closer look?

Let me know 🙂

Could you try the below instead?:

// BURGER MENU ICON ANIMATION
// =============================================================================

add_action( 'wp_footer', function() {
  ?>
    <script>
    var hamburgers = document.querySelectorAll(".hamburger"),
      menuToggles = document.querySelectorAll( '.menu-toggle' ),
      menuItems = document.querySelectorAll('nav ul li:not(.menu-item-has-children) > a'),
      htmlEl = document.documentElement;
  
    for ( var menuToggle = 0; menuToggle < menuItems.length; menuToggle++ ) {
        menuToggles[ menuToggle ].addEventListener("click", function() {
            for ( var h = 0; h < hamburgers.length; h++ ) {
                hamburgers[h].classList.toggle("is-active");
            }
        } );
    }
  
    for ( var menuItem = 0; menuItem < menuItems.length; menuItem++ ) {
      menuItems[ menuItem ].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 ( '#' === url ) {
            e.preventDefault();
            for ( var h = 0; h < hamburgers.length; h++ ) {
              hamburgers[h].classList.toggle("is-active");
            }
          }
        }
      }, false );
    }
  
          var checkHamburgers = function() {
              var openedMobileMenus = document.querySelectorAll( '.toggled, .has-active-search' );
  
              for ( var openedMobileMenu = 0; openedMobileMenu < openedMobileMenus.length; openedMobileMenu++ ) {
                  var menuToggle = openedMobileMenus[ openedMobileMenu ].querySelector( '.menu-toggle' );
  
                  if ( menuToggle && menuToggle.offsetParent === null ) {
                      if ( openedMobileMenus[ openedMobileMenu ].classList.contains( 'toggled' ) ) {
                          var hamburgers = document.querySelectorAll(".hamburger");
  
                          for ( var h = 0; h < hamburgers.length; h++ ) {
                              hamburgers[h].classList.remove("is-active");
                          }
                      }
                  }
              }
          }
          window.addEventListener( 'resize', checkHamburgers, false );
          window.addEventListener( 'orientationchange', checkHamburgers, false );
    </script>
  <?php
  } );

// BURGER MENU ICON ANIMATION ADDITION FOR OFF-CANVAS
// =============================================================================

add_action( 'wp_enqueue_scripts', function() {
	$script =
		'var slideoutToggles = document.querySelectorAll( ".slideout-toggle a" ),
			 hamburgers = document.querySelectorAll( ".hamburger" ),
			 closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );

		for ( var slideoutToggle = 0; slideoutToggle < slideoutToggles.length; slideoutToggle++ ) {
			slideoutToggles[ slideoutToggle ].addEventListener( "click", function( e ) {
				for ( var h = 0; h < hamburgers.length; h++ ) {
					if ( ! hamburgers[h].classList.contains( "is-active" ) ) {
						hamburgers[h].classList.add("is-active");
					}
				}
			} );
		};

		for ( var e = 0; e < closeElements.length; e++ ) {
			closeElements[e].addEventListener( "click", function( e ) {
				for ( var h = 0; h < hamburgers.length; h++ ) {
					hamburgers[h].classList.remove("is-active");
				};
			} );
		};';

	wp_add_inline_script( 'generate-offside', $script );
} );

Can you re-share your URL so I can take a look?

Thanks!

Can you try the updated code here?: https://generatepress.com/forums/topic/animated-hamburger-problem/#post-2426499