Hamburger menu style

[Paul]

Hi, I’ve recently upgraded to premium and am enjoying working on GeneratePress but I’m finding that the hamburger menu option for desktop is a little limited. I’m trying to re-create the nav menu from a theme I’ve worked on before, demo here – https://demo.kaliumtheme.com/main-dark/ . I’d prefer to develop in GeneratePress as it’s a faster loading theme but is there a way to replicate the burger menu from the other theme? Thanks.

[Tom]

Hi there,

It’s possible but somewhat difficult. It also involves adding javascript to your site, which does slightly affect load times.

Are you using the off canvas menu? If so, is the toggle present at all times (desktop and mobile)? Feel free to link me to your site so I can check out your configuration and I’ll try to help with the code 🙂

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

[Paul]

Hi Tom,
Thanks for the reply – I am using the off canvas menu with toggle present at all times on desktop and mobile. Testing URL linked.

[Tom]

Hi there,

This is the right place to start: https://generatepress.com/forums/topic/animate-the-hamburger-menu/#post-884890

That’s using the “collapse” style found here: https://jonsuh.com/hamburgers/

You’ll need to include that CSS on your website as well.

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

[Paul]

Hi Tom,
Thanks for the update. I’ve edited the functions.php file in the child theme and added the additional CSS and the new hamburger menu is showing but is not responding to mouse click.

[Tom]

I just adjusted the javascript here: https://generatepress.com/forums/topic/animate-the-hamburger-menu/#post-884890

Can you try updating it?

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

[Paul]

Hi Tom,
I’ve re-adjusted via the link you provided and the menu is now interactive but the old style overlay is drawing up instead of the nav menu items flying out to the left. Also there are two menu icons, the old style and the new style and the new style menu won’t revert to the burger icon from the close icon.

[Tom]

I’m not seeing the updated javascript on your site – can you double-check?

Also, how do you want the hamburger positioned? Should it be fixed in the top-right corner of the page? Or do you want it positioned inside your navigation as it is now?

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

[Paul]

Hi Tom, I’ve added the updated code (below) as per your link to the functions.php file in the child theme.

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

[Tom]

Any caching plugins? Or server caching/Cloudflare? I’m still seeing the old code.

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

[Paul]

I’m not running any caching plugins or CDN on this test server. The active theme is the GeneratePress child theme from the official download link and the functions.php contains the following:

<?php

/**

 * GeneratePress child theme functions and definitions.

 *

 * Add your custom PHP in this file. 

 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).

 */

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

/**
 * Hamburger menu flyout
 */
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 );
} );

[Tom]

Working now, must have been cached somehow.

Ok, let’s add this CSS:

.hamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 222222;
}

.slideout-toggle, button.slideout-exit {
    display: none !important;
}

And change your function to this:

/**
 * Hamburger menu flyout
 */
add_action( 'generate_after_footer', function() {
	?>
	<div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
	<?php
} );

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 ) {
                            if ( ! hamburgers[h].classList.contains( "is-active" ) ) {
				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 );
} );

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

[Paul]

Hi Tom,
Thanks for the update. I’ve added the CSS and amended the functions.php as you suggest but unfortunately it breaks the site with the following error Parse error: syntax error, unexpected 'add_action' (T_STRING), expecting ',' or ')' in /home/engineme/public_html/signature/wp-content/themes/generatepress_child/functions.php on line 43
I closed the first function (below) which seems to work and activates the hamburger menu, but the off-canvas overlay draws up and can’t be cancelled by clicking the X of the burger menu.

/**
 * Hamburger menu flyout
 */
add_action( 'generate_after_footer', function() {
	?>
	<div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
	<?php
} );

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

[Tom]

Sorry about that!

Getting close. It seems it’s opening the menu when clicking the close button. I adjusted my function above to only open it if it’s not currently open: https://generatepress.com/forums/topic/hamburger-menu-style/#post-892308

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

[Paul]

Hi Tom,
Any update on the slideout menu function?

[Author]

Posts