Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Support request] Change Menu position on mobile

Home Forums Support [Support request] Change Menu position on mobile

Home Forums Support Change Menu position on mobile

  • This topic has 9 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #243154
    Amos

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

    #243294
    Tom
    Lead Developer
    Lead Developer

    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?

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

    #243929
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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

    #247868
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
    #247904
    Amos

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

    #248013
    Tom
    Lead Developer
    Lead Developer

    Can I see what you have so far?

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

    #248123
    Tom
    Lead Developer
    Lead Developer

    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)?

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