[Resolved] Animated Menu Hamburger with Sticky Navigation

Any ideas how to make the script work with the sticky navigation?

var hamburgers = document.querySelectorAll(".hamburger"),
menuToggle = document.querySelector( '.menu-toggle' ),
menuItems = document.querySelectorAll( 'nav ul a' ),
htmlEl = document.documentElement;

menuToggle.addEventListener("click", function() {
for ( var h = 0; h < hamburgers.length; h++ ) {
	hamburgers[h].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 ( '#' === 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 i = 0; i < openedMobileMenus.length; i++ ) {
		var menuToggle = openedMobileMenus[i].querySelector( '.menu-toggle' );

		if ( menuToggle && menuToggle.offsetParent === null ) {
			if ( openedMobileMenus[i].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 );

var slideoutToggles = document.querySelectorAll( ".slideout-toggle a" ),
			 hamburgers = document.querySelectorAll( ".hamburger" ),
			 closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );

		for ( var i = 0; i < slideoutToggles.length; i++ ) {
			slideoutToggles[i].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");
				};
			} );
		};

Thanks Fernando. It’s a good idea to disable the GP Sticky Nav and work with the current navigation, less overhead. I did the following:

added this function to the theme functions.php file:

function add_activate_class_to_header() {
  ?>
  <script>
    jQuery(window).scroll(function() {
      var scroll = jQuery(window).scrollTop();
      if (scroll >= 100) {
        jQuery("header").addClass("activate");
      } else {
        jQuery("header").removeClass("activate");
      }
    });
  </script>
  <?php
}
add_action('wp_footer', 'add_activate_class_to_header');

it adds the class “activate” to the header tag when the user scrolls.

Then on the CSS:

.site-header.activate {
    position: fixed;
    top: 0;
    background: white;
    width: 100%;
    transition: background 0.5s;
}