a problem with jonsuh.com/hamburgers menu

Hmm you're using some javascript for that toggle, right? If so, can you share it here?

hi
i'm using few lines of codes like u gave me before:

<link href="https://www.t-talk.co.il/wp-content/themes/generatepress_child/dist/hamburgers.css" rel="stylesheet">
in GP ELEMENTS wp_head

<script>
	var hamburger = document.querySelector(".hamburger"),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' );

	menuToggle.addEventListener("click", function() {
		hamburger.classList.toggle("is-active");
	} );

	for ( var i = 0; i < menuItems.length; i++ ) {
		menuItems[i].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>

in GP ELEMENTS wp_footer

add_action( 'generate_inside_mobile_header_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>

<?php
}

in CHILD THEME FUNCTIONS wp_footer

Try adding this script as well:

<script>
	var allNavToggles = document.querySelectorAll( '.menu-toggle' );
	
	var checkHamburgerMobile = function() {
		for ( var i = 0; i < allNavToggles.length; i++ ) {
			if ( allNavToggles[i].offsetParent === null ) {
				var closestParent = allNavToggles[i].closest( 'nav' );
				var hamburger = document.querySelector( '.hamburger' );

				if ( hamburger && hamburger.classList.contains( 'is-active' ) ) {
					hamburger.classList.remove( 'is-active' );
				}
			}
		}
	}
	window.addEventListener( 'resize', checkHamburgerMobile, false );
	window.addEventListener( 'orientationchange', checkHamburgerMobile, false );
</script>

Where?
in GP ELEMENTS wp_footer?
Open a new hook? Or on the same hook?

hi
i added it to the elements (tried the wp_head, and wp_footer) and still no good...

I just made an adjustment to the above: https://generatepress.com/forums/topic/a-problem-with-jonsuh-com-hamburgers-menu/#post-712482

Can you give it another shot?

hi
do u mean to exchange the script i have in the wp_footer in this new one??

or add it to it?

Replace the one I gave you earlier in this thread with the one I adjusted above.

hi
i put in the Wp_footer:

<script>
var hamburger = document.querySelector(".hamburger"),
menuToggle = document.querySelector( '.menu-toggle' ),
menuItems = document.querySelectorAll( 'nav ul a' );

menuToggle.addEventListener("click", function() {
hamburger.classList.toggle("is-active");
} );

for ( var i = 0; i < menuItems.length; i++ ) {
menuItems[i].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>

<script>
var allNavToggles = document.querySelectorAll( '.menu-toggle' );

var checkHamburgerMobile = function() {
for ( var i = 0; i < allNavToggles.length; i++ ) {
if ( allNavToggles.offsetParent === null ) {
var closestParent = allNavToggles.closest( 'nav' );
var hamburger = document.querySelector( '.hamburger' );

if ( hamburger && hamburger.classList.contains( 'is-active' ) ) {
hamburger.classList.remove( 'is-active' );
}
}
}
}
window.addEventListener( 'resize', checkHamburgerMobile, false );
window.addEventListener( 'orientationchange', checkHamburgerMobile, false );
</script>

and also if i just put it by itself it's not working correct...
this:

<script>
var allNavToggles = document.querySelectorAll( '.menu-toggle' );

var checkHamburgerMobile = function() {
for ( var i = 0; i < allNavToggles.length; i++ ) {
if ( allNavToggles.offsetParent === null ) {
var closestParent = allNavToggles.closest( 'nav' );
var hamburger = document.querySelector( '.hamburger' );

if ( hamburger && hamburger.classList.contains( 'is-active' ) ) {
hamburger.classList.remove( 'is-active' );
}
}
}
}
window.addEventListener( 'resize', checkHamburgerMobile, false );
window.addEventListener( 'orientationchange', checkHamburgerMobile, false );
</script>

for now it's just what you gave me... it's just not switching to the X it's staying as the hamburger icon.
take a look.
thanks

Can you try this as your full script?:

<script>
	var hamburger = document.querySelector(".hamburger"),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' );

	menuToggle.addEventListener("click", function() {
		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 );
	}

	var allNavToggles = document.querySelectorAll( '.menu-toggle' );
	
	var checkHamburgerMobile = function() {
		for ( var i = 0; i < allNavToggles.length; i++ ) {
			if ( allNavToggles.offsetParent === null ) {
				var closestParent = allNavToggles.closest( 'nav' );

				if ( hamburger && hamburger.classList.contains( 'is-active' ) ) {
					hamburger.classList.remove( 'is-active' );
				}
			}
		}
	}
	window.addEventListener( 'resize', checkHamburgerMobile, false );
	window.addEventListener( 'orientationchange', checkHamburgerMobile, false );
</script>

hi
i did
still the same.
take a look please
thanks

You know what? We might be able to ditch the javascript completely.

Disable that javascript, and add this CSS instead:

.mobile-menu-open .hamburger--collapse .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-open .hamburger--collapse .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-open .hamburger--collapse .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

hi i did
removed the wp_footer element
and put what u wrote in the CSS
but still the hamburger stay the same and not becoming an X