[Resolved] Move Menu to bottom of mobile site display

Home Forums Support Move Menu to bottom of mobile site display

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #109203
    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”.

    #109267
    Tom
    Lead Developer
    Lead Developer

    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>
    #344904
    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.

    #345447
    Tom
    Lead Developer
    Lead Developer

    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.

    #345522
    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?

    #345659
    Tom
    Lead Developer
    Lead Developer

    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.

    #345733
    Steve

    Okay, thank you.

    #345857
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.