[Resolved] Animated hamburger menu icon

The 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.

I applied the last code but it didn’t change anything.

this is the screenshot:
https://prnt.sc/sh5dr2

Yes 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..

Yes, that’s the part I tried to delete and the menu isn’t working. The hamburger icon doesn’t show the menu on click.