Animated hamburger menu icon

Hi there,

Can you check on this thread?
https://generatepress.com/forums/topic/animate-the-hamburger-menu/

It's the latest one I can find.

Let me know :)

Hi Leo, thanks for your answer. We are pretty close to the solution but not done yet.

1. I'm getting a javascript error: https://prnt.sc/sersz7

2. Once I open the menu, the hamburger icon is hiding behind the off canvas panel so nobody can see the animation. The close icon is still the old one.

Is it difficult to make the new hamburger icon always visible and use it as a close button either?

I've applied a css media query to disable the hamburger on desktop.

Can you share your full code so I can see the source of the error?

The only way for the animated icon to always show is to make the mobile header display on top:

#mobile-header {
    z-index: 100002 !important;
    position: relative;
}

Thanks Tom! I applied your css and seems like we are close to the solution. I would like to close the menu with the same hamburger. How can I do it?

This is the Javascript showing an error:

<script>
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 );
}
</script>

Try replacing this:

closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' );

With this:

closeElements = document.querySelectorAll( '.slideout-overlay, .hamburger.is-active' );

no luck. Now is showing me the old close button with a blue hover background.

https://paste.pics/905RX

If I click the old close button is closing the menu but if I click the new animated hamburger is not working.

The old close button is showing up only in computer if I resize the browser to a mobile size. In my mobile phone doesn't show up and there's a strange hover effect when I click any element inside the menu. Maybe that strange effect was there before and I didn't realize it.

I'm not seeing what your screenshot shows at all - did you revert it?

You could also try changing this:

var hamburger = document.querySelector(“.hamburger”)

To this:

var hamburger = document.querySelector('.hamburger:not(.is-active)')

I applied the last code but it didn't change anything.

this is the screenshot:
https://prnt.sc/sh5dr2

Can you make sure you haven't added the code twice?: https://www.screencast.com/t/UwbaE9fNSJe

Yes Tom you are right!
This is my functions code:

<?php

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>
    <div class="hamburger hamburger--collapse">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
<?php
}

add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
/** 
 * Enqueue Font Awesome. 
 */
function tu_load_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.5.0/css/all.css', array(), '5.5.0' );
}

add_action( 'generate_inside_navigation', 'tu_add_hamburger' );
add_action( 'generate_inside_mobile_header', 'tu_add_hamburger' );
function tu_add_hamburger() {
	if ( 'generate_inside_mobile_header' === current_action() ) {
		echo '<div class="mobile-bar-items">';
	}
	?>
	<div class="hamburger hamburger--collapse">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
	<?php
	if ( 'generate_inside_mobile_header' === current_action() ) {
		echo '</div>';
	}
}

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

		for ( var h = 0; h < hamburgers.length; h++ ) {
			hamburgers[h].addEventListener( "click", function( e ) {
				generateOffside.open();
				this.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 );
} );

and this is the added code inside a hook footer:

<script>
	var hamburger = document.querySelector('.hamburger:not(.is-active)'),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' ),
		closeElements = document.querySelectorAll( '.slideout-overlay, .hamburger.is-active' );

	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 );
	}
</script>

If I delete the functions code, the menu isn't working...So I don't know what code should I use..

Did you try only deleting this part?:

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

		for ( var h = 0; h < hamburgers.length; h++ ) {
			hamburgers[h].addEventListener( "click", function( e ) {
				generateOffside.open();
				this.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 );
} );

Yes, that's the part I tried to delete and the menu isn't working. The hamburger icon doesn't show the menu on click.

Ok, then keep that code and remove the other code in the Element.

Then change your code to this:

add_action( 'wp_enqueue_scripts', function() {
	$script =
		'var hamburgers = document.querySelectorAll( ".hamburger:not(.is-active)" ),
		closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit, .hamburger.is-active" );

		for ( var h = 0; h < hamburgers.length; h++ ) {
			hamburgers[h].addEventListener( "click", function( e ) {
				generateOffside.open();
				this.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 );
} );