[Support request] Hamburger menu style

Home Forums Support [Support request] Hamburger menu style

Home Forums Support Hamburger menu style

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #889881
    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.

    #890149
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #890281
    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.

    #890927
    Tom
    Lead Developer
    Lead Developer

    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.

    #890958
    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.

    #891138
    Tom
    Lead Developer
    Lead Developer
    #891336
    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.

    #892016
    Tom
    Lead Developer
    Lead Developer

    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?

    #892042
    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 );
    } );
    #892046
    Tom
    Lead Developer
    Lead Developer

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

    #892091
    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 );
    } );
    #892308
    Tom
    Lead Developer
    Lead Developer

    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 );
    } );
    #892445
    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 );
    } );
    #893073
    Tom
    Lead Developer
    Lead Developer

    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

    #905649
    Paul

    Hi Tom,
    Any update on the slideout menu function?

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.