Archived topic
Reverse the menu alignment for mobile
4 replies · Started by Richard Bland on September 3, 2015
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?
Hey Richard Bland,
I think this thread may help you: https://generatepress.com/forums/topic/mobile-menu-below-logo/
:)
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>Cheers buddy.
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