[Resolved] Mobile menu above header

[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

[Tom]

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

Where is it currently set to?

[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.

[Tom]

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 10 years, 2 months ago by Tom.

[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

[Tom]

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 🙂

[SCIP]

Thank you Tom, that worked perfectly.

Your support is much appreciated.

Mark.

[Tom]

You’re welcome! 🙂

[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

[Tom]

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.

[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

[Tom]

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' );
}

[Annamalai]

Thanks Tom for your help

[Tom]

No problem 🙂

[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

[Author]

Posts