[Support request] Change Menu position on mobile

[Amos]

Hello Tom. i have a secondary menu (Above header) it is possible to change it to below header only on mobile?
Thank You.

[Tom]

Unfortunately it’s really tough to move HTML elements around without using javascript which is pretty jumpy.

One solution might be to use the primary navigation as your mobile navigation and just hide it on desktop screens?

[Amos]

I need 2 menu on desktop.i cant hide one of them.
desktop:primary nav – below header (slideout mobile) .secondery nav – above header
i want mobile will be – mobile header (primary) .secondery nav – below header.

maybe if i am using mobile header i can add a text\image below the logo and the menu?

[Tom]

I guess the only way to move the secondary navigation below the primary navigation/mobile header on mobile would be to use javascript.

It will be a little jumpy..

You would place this into the wp_footer hook in GP Hooks:

<script>
jQuery(window).load(function($) {
	var mobile, widthTimer;
	mobile = jQuery( '.menu-toggle' );
			
	function generateSecondaryCheckWidth() {
		if ( mobile.is( ':visible' ) ) {
			jQuery('#secondary-navigation').insertAfter('#site-navigation');
		} else {
			jQuery('#secondary-navigation').insertBefore('.site-header');
		}
	}
			
	if ( mobile.is( ':visible' ) ) {
		generateSecondaryCheckWidth();
	}
			
	jQuery(window).resize(function() {
		clearTimeout(widthTimer);
		widthTimer = setTimeout(generateSecondaryCheckWidth, 100);
	});
});
</script>

Worth a shot 🙂

[Amos]

Tom unfortunately i am still stuck! maybe there is an option on “mobile header” that the slideout will be not the menu beside the logo?
i want to use slidoout on the menu below the mobile header.

[Tom]

I’m not too sure what you mean, but maybe this will help?:

@media (max-width: 768px) {
    .mobile-header-navigation .mobile-header-logo {
        float: none;
        text-align: center;
    }

    .mobile-header-logo .mobile-header-navigation .menu-toggle {
        float: none !important;
        display: block !important;
        text-align: center;
        width: 100%;
    }
}

[Amos]

i am using mobile header (primary) and below header (secondary) i want the secondary will be the slideout menu.

[Tom]

Can I see what you have so far?

[Amos]

Example :
http://22.idanweb.com/

i choose the secondery menu to be the slideout.
but instead to slideout the menu below the header – it change the menu beside the header and now i have 2 secondary menu. instead one primary and one secondary.

[Tom]

I guess I’m not understanding what you’re trying to achieve.

Do you want to remove the secondary navigation on mobile (no more grey bar)?

[Author]

Posts