[Resolved] Reverse the menu alignment for mobile

Home Forums Support Reverse the menu alignment for mobile

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #133995
    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?

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #134030
    Jean

    Hey Richard Bland,

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

    🙂

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

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #134038
    Richard Bland

    Cheers buddy.

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #134102
    Tom
    Lead Developer
    Lead Developer

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.