- This topic has 20 replies, 2 voices, and was last updated 1 year, 7 months ago by
Paul.
-
AuthorPosts
-
May 5, 2019 at 11:47 am #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.
May 5, 2019 at 9:38 pm #890149Tom
Lead 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 6, 2019 at 1:18 am #890281Paul
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.May 6, 2019 at 10:32 am #890927Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 6, 2019 at 11:01 am #890958Paul
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.May 6, 2019 at 3:54 pm #891138Tom
Lead DeveloperLead DeveloperI 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-developmentMay 6, 2019 at 10:55 pm #891336Paul
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.May 7, 2019 at 9:18 am #892016Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 7, 2019 at 9:52 am #892042Paul
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 ); } );
May 7, 2019 at 9:57 am #892046Tom
Lead DeveloperLead DeveloperAny 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-developmentMay 7, 2019 at 10:53 am #892091Paul
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 ); } );
May 7, 2019 at 4:34 pm #892308Tom
Lead 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 ); } );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 7, 2019 at 10:36 pm #892445Paul
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 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 #893073Tom
Lead 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 20, 2019 at 9:33 am #905649Paul
Hi Tom,
Any update on the slideout menu function? -
AuthorPosts
- You must be logged in to reply to this topic.