Reply To: Move Menu to bottom of mobile site display

[Tom]

To have it not display at all, you would add this CSS:

@media (max-width:768px) {
      .main-navigation {
            display: none;
      }
}

To move it to the footer on mobile, you would have to use javascript.

For example, try adding this into your wp_footer hook:

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