[Resolved] Reverse the menu alignment for mobile

[Richard Bland]

Morning Tom,

Doing my 4th GP build at the moment, 4th – 5th, not sure how many I am working on now!

This one I have the navigation menu floating up to the right hand side of the website, as with a couple of others. This all works perfectly, but when I shrink down to mobile the mobile menu takes over and positions itself over the top of the logo. I know this is because of the order within the code itself, but where can I switch this order in the code so the menu sits below the logo?

Usually with other sites I just switch the code around a bit but I can see that you are using <?php generate_header_items(); ?> to put in place the logo and navigation elements from some seperate php files like the navigation.php file…

Any ideas mate?

[Jean Paiva]

Hey Richard Bland,

I think this thread may help you: https://generatepress.com/forums/topic/mobile-menu-below-logo/

🙂

[Richard Bland]

For those who want the script right now!

<script type="text/javascript">
	jQuery(window).load(function($) {
		var mobile, widthTimer;
		mobile = jQuery( '.menu-toggle' );
			
		function generateCheckWidth() {
			if ( mobile.is( ':visible' ) ) {
				jQuery('.main-navigation').appendTo('.inside-header');
			} else {
				jQuery('.main-navigation').prependTo('.inside-header');
			}
		}
			
		if ( mobile.is( ':visible' ) ) {
			generateCheckWidth();
		}
			
		jQuery(window).resize(function() {
			clearTimeout(widthTimer);
			widthTimer = setTimeout(generateCheckWidth, 100);
		});
	});
</script>

[Richard Bland]

Cheers buddy.

[Tom]

That javascript method works really well 🙂

You can also add this function to your child theme and change the order if yo’d like: https://gist.github.com/generatepress/940493d7b6a9424e70d7

[Author]

Posts