- This topic has 20 replies, 2 voices, and was last updated 4 years, 11 months ago by Paul.
-
AuthorPosts
-
May 5, 2019 at 11:47 am #889881Paul
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.
May 5, 2019 at 9:38 pm #890149TomLead DeveloperLead DeveloperHi 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 🙂
May 6, 2019 at 1:18 am #890281PaulHi 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.May 6, 2019 at 10:32 am #890927TomLead DeveloperLead DeveloperHi 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.
May 6, 2019 at 11:01 am #890958PaulHi 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.May 6, 2019 at 3:54 pm #891138TomLead DeveloperLead DeveloperI just adjusted the javascript here: https://generatepress.com/forums/topic/animate-the-hamburger-menu/#post-884890
Can you try updating it?
May 6, 2019 at 10:55 pm #891336PaulHi 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.May 7, 2019 at 9:18 am #892016TomLead DeveloperLead DeveloperI’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?
May 7, 2019 at 9:52 am #892042PaulHi 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 ); } );
May 7, 2019 at 9:57 am #892046TomLead DeveloperLead DeveloperAny caching plugins? Or server caching/Cloudflare? I’m still seeing the old code.
May 7, 2019 at 10:53 am #892091PaulI’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 ); } );
May 7, 2019 at 4:34 pm #892308TomLead DeveloperLead DeveloperWorking 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 ); } );
May 7, 2019 at 10:36 pm #892445PaulHi 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 errorParse 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 ); } );
May 8, 2019 at 8:53 am #893073TomLead DeveloperLead DeveloperSorry 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
May 20, 2019 at 9:33 am #905649PaulHi Tom,
Any update on the slideout menu function? -
AuthorPosts
- You must be logged in to reply to this topic.