[Resolved] a problem with jonsuh.com/hamburgers menu

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

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

or add it to it?

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

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

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