[Support request] Animate the hamburger menu

[Mårten]

I try to add animation to the hamburger menu from https://jonsuh.com/hamburgers/

I have insert the files in the Generate Press Child folder.

Added CSS code:

.menu-toggle .mobile-menu,
.menu-toggle:before {
    display: none;
}

Added function:

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
}

AND

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

Installed the Font Awesome 5 plugin.

Add script in wp footer iv Elements:

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

Added in wp head via Elements:

<link href=”http://www2.resvillemathantverk.se/wp-content/themes/generatepress_child/dist/hamburgers.css&#8221; rel=”stylesheet”>

Do you possibly have any idea what has gone wrong? 🙂

Thanks

[Leo]

Hi there,

Can you take a look at this (long) post and see if everything is done correctly?
https://generatepress.com/forums/topic/animated-hamburger-icon/
https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mårten]

I have followed that post and commented but Tom asked me to create a new thread … 🙂
What I can see, I have done everything right.

[Tom]

I’m not seeing the hamburger element inside your menu toggle. How are you adding that function currently?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mårten]

Hmm I don’t know. I just followed the previous post about the same issue. Where do I add that function?

[David]

Hi there,

this article explains how you can add PHP ( functions ):

https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mårten]

Oh ok. I’ve already added the function in Code Snippet. Please see screenshot.

https://ibb.co/PDr0Dnm

[Tom]

Are you wanting hamburger to be on desktop or mobile? Or both?

On desktop, you’re using the regular off canvas toggle, so the above code would need to be completely re-worked (not 100% it’s possible yet).

On mobile, the off canvas panel covers the menu toggle, so the animation wouldn’t be visible.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mårten]

I want the hamburger on both desktop and mobile.
Please help me, i thought i did everything right. But clearly not! 🙁

[Tom]

Unfortunately, it’s a pretty complex thing, as those animated menus use multiple elements and transitions. I’ll see if I can write something up for you today.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Alright, not easy but I have something working.

Notes:

1. This requires the off canvas panel to be set to “On”.
2. The mobile header must be active.

First, add these functions:

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

Now add this CSS:

.hamburger {
	float: right;
	order: 100;
	padding: 0 20px;
	margin-top: 15px;
}

.hamburger-box {
	width: 20px;
	height: 12px;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
	width: 20px;
	height: 2px;
}

.hamburger-inner:before {
	top: -5px;
}

.hamburger-inner:after {
	bottom: -5px;
}

.hamburger--collapse .hamburger-inner:after {
	top: -10px;
}

.hamburger-inner, 
.hamburger-inner:after, 
.hamburger-inner:before,
.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner:after, 
.hamburger.is-active .hamburger-inner:before {
	background-color: #fff;
}

#mobile-header .menu-toggle, li.slideout-toggle {
	display: none;
}

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0,-5px,0) rotate(-45deg);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mårten]

Thank you!
It looks like we are getting closer! 🙂

The original hamburger appears in sticky navigation and mobile version. The menu does not appear when i click on the new hamburger.

[Tom]

I just updated the javascript – can you try re-adding it?

I’m also not seeing the CSS added – how did you add it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts