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

[liorsade8]

hi tom,
i just realised that there is a problem with the menu…
check this site:
http://t-talk.s178.upress.link
and also this site:
http://ofek.s178.upress.link
and put the browser to 710px for the example…
now press the button and leave the menu open…
now enlarge the entire browser “maximaize”
and than click again “restore down” on the entire browser…
and you will see that the menu is broken…
u need to refresh the page for it to come back to normal…

https://postimg.cc/Hc0jks5k

with your menu it’s fine…
like this site:
http://www.sadestudio.s178.upress.link/

but i do want to use the jonsuh.com/hamburgers menu for all of my sites…
please help,
thanks.

[Tom]

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

[liorsade8]

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() {
?>

<span class=”hamburger-label”>תפריט</span>

<?php
}

in CHILD THEME FUNCTIONS wp_footer

[Tom]

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>

[liorsade8]

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

[liorsade8]

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

[Tom]

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?

[liorsade8]

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

[liorsade8]

or add it to it?

[Tom]

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

[liorsade8]

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

[Tom]

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>

[liorsade8]

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

[Tom]

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;
}

[liorsade8]

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

[Author]

Posts