[Resolved] Mobile menu above header

Home Forums Support [Resolved] Mobile menu above header

Home Forums Support Mobile menu above header

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #166287
    SCIP

    Currently the mobile menu is below the header logo until it becomes sticky.

    Is it possible to move the mobile menu above the logo, even when not sticky.

    This site has a large logo so it’s not possible to put it in the menu bar.

    Thanks

    #166311
    Tom
    Lead Developer
    Lead Developer

    Hmm, this is a tough one unless you have your navigation set to be above the header.

    Where is it currently set to?

    #166320
    SCIP

    It’s set to blow the header. I had a play last night and couldn’t see what to do.

    The demo site is bnt.scipdev.org.

    It’s only icing on the cake.

    #166323
    Tom
    Lead Developer
    Lead Developer

    Nice site!

    You could technically use some javascript for this.

    Paste this block of code into the wp_footer hook “Appearance > GP Hooks”:

    <script>
    jQuery(document).ready(function($) {
    	var mobile, widthTimer;
    	mobile = jQuery( '.menu-toggle' );
    			
    	function generateMoveNav() {
    		if ( mobile.is( ':visible' ) ) {
    			jQuery('.main-navigation').insertBefore('.site-header');
    		} else {
    			jQuery('.main-navigation').insertAfter('.site-header');
    		}
    	}
    			
    	if ( mobile.is( ':visible' ) ) {
    		generateMoveNav();
    	}
    			
    	jQuery(window).resize(function() {
    		clearTimeout(widthTimer);
    		widthTimer = setTimeout(generateMoveNav, 100);
    	});
    });
    </script>
    • This reply was modified 8 years, 2 months ago by Tom.
    #166341
    SCIP

    Thanks

    The code works perfectly but does cause a jump when the page is loading because the menu does load below the logo I suppose and is move by javascript as you scroll.

    I think I will leave it out.

    However, the code is there for other people to use.

    Thank you for your help

    Mark

    #166414
    Tom
    Lead Developer
    Lead Developer

    I just made a small adjustment that might make that jump a little less noticeable.

    I’ll keep this topic in mind to see if I can come up with something better πŸ™‚

    #166904
    SCIP

    Thank you Tom, that worked perfectly.

    Your support is much appreciated.

    Mark.

    #167004
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! πŸ™‚

    #206155
    Annamalai

    Hi Tom any update on this topic please let me know, I also need to do the same like Menu should go top above the logo

    #206204
    Tom
    Lead Developer
    Lead Developer

    No updates yet I’m afraid – although there is the mobile header feature in Menu Plus where you can add your logo into the navigation bar.

    #206383
    Annamalai

    My Goal is need to move the Primary menu above the logo on the page load itself during mobile view i.e
    for Responsive. When i debugged found that move-navigation.min js creating plugin. I
    have done the following things

    http://1cb.424.myftpupload.com/

    1. Using Snippets plugin Deregister the move-navigation.js:

    ` add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
    function my_deregister_javascript() {
    wp_deregister_script( ‘move-navigation’ );
    }`

    2. Next I added the script in wp_footer of GP_Hooks

    
    
    jQuery(document).ready(function($) {
    
      generateMoveNav(); // Call on page Load 
      
      jQuery(window).resize(function() {
    	 if(jQuery(window).width() < 751){ // During Resize
             		generateMoveNav();
    		 }
    	});
      
    	function generateMoveNav() {
                var mobile = jQuery( '.menu-toggle' );
    
    		if ( mobile.is( ':visible' )) {
    			jQuery('.main-navigation').insertBefore('.site-header');
    
    		} else {
    
    		}
    	}
    
    });

    But still move-navigation.js not getting removed

    #206460
    Tom
    Lead Developer
    Lead Developer

    To remove that script, you need to do this:

    add_action( 'wp_enqueue_scripts', 'generate_remove_scripts' );
    function generate_remove_scripts() 
    {
        wp_dequeue_script( 'generate-move-navigation' );
    }
    #206565
    Annamalai

    Thanks Tom for your help

    #206602
    Tom
    Lead Developer
    Lead Developer

    No problem πŸ™‚

    #207484
    Annamalai

    Hi Tom,

    Sorry to disturb you again, I added a secondary menu in my website in the Footer section During mobile view or if width is less then 750 px(Responsive) I need to expand show the menu link no need the toggle option. For that I added the following code in GPhooks footer section

    jQuery( ".secondary-menu-toggle" ).trigger( "click" ).css('display','none'); 
    
    Menu is expanding as per click but  <strong> X

    mark its not getting removed.. Some times the above code is removing the whole secondary menu links

    Is there any way to remove the Toggle option and display all the secondary menus by default

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