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");
				};
			} );
		};

Hi Duarte,

I can't check your site right now, it seems to be down: https://share.getcloudapp.com/7KujqvOB

The Animated Hamburger code isn't meant to work for the sticky Nav of GP.

GP's sticky nav works in such a way that its markup only appears through Javascript upon scrolling down. It isn't there yet when the site loads.

Thus, when the variables are initiated in the Javascript of the Animated Hamburger, it won't detect the elements in the Sticky nav because it isn't there yet on the first load as mentioned.

To make the hamburger button animated on the sticky nav, the easiest approach would be to disable the GP Sticky Nav, and then just make the Header sticky through custom CSS.

Here's a sample CSS you can try adding for this:

header#masthead {
    position: sticky;
    top: 0;
}

It may look different though from your current Sticky nav's design.

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;
}

You're welcome, Duarte!