[Resolved] Mobile menu below Logo

[Roberto Enrique]

Is it possible to move the mobile menu below the logo?

[Tom]

Where do you currently have it placed? I can provide some javascript that will move it on mobile once I know 🙂

Thanks!

[Roberto Enrique]

Right now is placed at the right side of the logo:

[Roberto Enrique]

I really need to put that menu bellow logo. Can you put me in the right direction, I’m not that proficient with coding.
If it is not possible just let me know.

Thanks in advance

[Tom]

Adding this code to the wp_footer hook should do the trick:

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

Let me know if that works or not 🙂

[Roberto Enrique]

It works Tom, the style changes a little bit, the menu is now full with but I think I can handle that with some simple css.

Before:

After:

Thank you very much.

[Tom]

Interesting – if you want to send me a URL via email feel free – I may be able to see why it’s gone to full width.

[Tom]

I edited my code above – it should work now 🙂

[Roberto Enrique]

That was just perfect!
Thanks Tom.

[Tom]

You’re welcome 🙂

[Richard Bland]

Sweet!

[Author]

Posts