- This topic has 18 replies, 3 voices, and was last updated 3 years, 11 months ago by Tom.
-
AuthorPosts
-
May 10, 2020 at 10:43 am #1278131Ramon
Hi!
I’m trying to achieve the animated hamburger menu icon of the following threat with no success:https://generatepress.com/forums/topic/animated-hamburger-icon/
Could you please help me on that?
May 10, 2020 at 11:19 am #1278175LeoStaffCustomer SupportHi there,
Can you check on this thread?
https://generatepress.com/forums/topic/animate-the-hamburger-menu/It’s the latest one I can find.
Let me know 🙂
May 11, 2020 at 8:26 am #1279321RamonHi Leo, thanks for your answer. We are pretty close to the solution but not done yet.
1. I’m getting a javascript error: https://prnt.sc/sersz7
2. Once I open the menu, the hamburger icon is hiding behind the off canvas panel so nobody can see the animation. The close icon is still the old one.
Is it difficult to make the new hamburger icon always visible and use it as a close button either?
I’ve applied a css media query to disable the hamburger on desktop.
May 11, 2020 at 5:15 pm #1279984TomLead DeveloperLead DeveloperCan you share your full code so I can see the source of the error?
The only way for the animated icon to always show is to make the mobile header display on top:
#mobile-header { z-index: 100002 !important; position: relative; }
May 13, 2020 at 10:30 pm #1283577RamonThanks Tom! I applied your css and seems like we are close to the solution. I would like to close the menu with the same hamburger. How can I do it?
This is the Javascript showing an error:
<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>May 14, 2020 at 9:24 am #1284476TomLead DeveloperLead DeveloperTry replacing this:
closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' );
With this:
closeElements = document.querySelectorAll( '.slideout-overlay, .hamburger.is-active' );
May 14, 2020 at 9:54 am #1284546Ramonno luck. Now is showing me the old close button with a blue hover background.
If I click the old close button is closing the menu but if I click the new animated hamburger is not working.
May 14, 2020 at 9:59 am #1284563RamonThe old close button is showing up only in computer if I resize the browser to a mobile size. In my mobile phone doesn’t show up and there’s a strange hover effect when I click any element inside the menu. Maybe that strange effect was there before and I didn’t realize it.
May 14, 2020 at 8:16 pm #1285071TomLead DeveloperLead DeveloperI’m not seeing what your screenshot shows at all – did you revert it?
You could also try changing this:
var hamburger = document.querySelector(“.hamburger”)
To this:
var hamburger = document.querySelector('.hamburger:not(.is-active)')
May 14, 2020 at 11:42 pm #1285154RamonI applied the last code but it didn’t change anything.
this is the screenshot:
https://prnt.sc/sh5dr2May 15, 2020 at 9:43 am #1286000TomLead DeveloperLead DeveloperCan you make sure you haven’t added the code twice?: https://www.screencast.com/t/UwbaE9fNSJe
May 15, 2020 at 11:35 am #1286173RamonYes Tom you are right!
This is my functions code:<?php 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 ); 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 } 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' ); } 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 ); } );
and this is the added code inside a hook footer:
<script> var hamburger = document.querySelector('.hamburger:not(.is-active)'), menuToggle = document.querySelector( '.menu-toggle' ), menuItems = document.querySelectorAll( 'nav ul a' ), closeElements = document.querySelectorAll( '.slideout-overlay, .hamburger.is-active' ); 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>
If I delete the functions code, the menu isn’t working…So I don’t know what code should I use..
May 15, 2020 at 4:52 pm #1286524TomLead DeveloperLead DeveloperDid you try only deleting this part?:
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 15, 2020 at 9:01 pm #1286678RamonYes, that’s the part I tried to delete and the menu isn’t working. The hamburger icon doesn’t show the menu on click.
May 16, 2020 at 10:55 am #1287575TomLead DeveloperLead DeveloperOk, then keep that code and remove the other code in the Element.
Then change your code to this:
add_action( 'wp_enqueue_scripts', function() { $script = 'var hamburgers = document.querySelectorAll( ".hamburger:not(.is-active)" ), closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit, .hamburger.is-active" ); 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 ); } );
-
AuthorPosts
- You must be logged in to reply to this topic.