[Resolved] Move Menu to bottom of mobile site display

[Jack Heape]

I searched the support forum but could not find an answer on this specific topic. Is there a way to move the menu button to display just above the footer section on the mobile site? Or just not have it display at all? In particularly, I do not want the menu button showing up first on the mobile screen, which it does when you have the navigation position set to “above header”.

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

[Steve]

Hello Tom,

your code dosnt seem to work anymore and if have some more requests:
first off, your latest update wa amazing – i really like that you can hide the menu while scrolling down with a click.
Iam thinking of moving the menu on mobile to the bottom while having it on top for desktop users, is that possible?
The hide on scroll down effect is neat but would be problematic if the menu was on bottom (in mobile) so is there away to only use it for desktop users ( i have no problem with deactivating it, if it is to complicated?

Sorry to trouble you, and thank you for your time.

[Tom]

Hi there,

The only way to do that would be to use the mobile header option.

It has the hide on scroll down functionality as well, but it’s a separate option so you can have it disabled while still having it enabled on desktop.

[Steve]

Hi Tom :D,

really nice idea I didnt see that^^.

i repositioned the mobile sticky menu with:

.mobile-header-navigation.is_stuck{
 bottom: 0px;
 top: auto !important;
}

Is that a good idea or should i care for something?
The opening direction seems to adjust automatically thats neat.

Thank you for the help, have a nice day.

@edit: I just noticed that you dont see the footer anymore (menu is directly over it).
Should I fiddle with the footer margin if the mobile header is active or is there a more appropriate way?

[Tom]

That would be the only way to do it, but it will cover anything at the bottom of your viewport (as you mentioned).

You can adjust the bottom value to something higher if you want to offset it from the bottom.

[Steve]

Okay, thank you.

[Tom]

No problem 🙂

[Author]

Posts