Docs

[Nayuk01]

http://www.holcombwebdesign.com

The menu is working correctly but after the page scrolls to a different section, the menu does not stay on the screen.

Thank you

Naomi

[Rue Nel]

Hello Naomi,

Thanks for writing in! To make the menu positioned at the top or fixed top position on smaller devices, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .x-navbar-fixed-top {
    position: fixed;
  }
}

And then after clicking, to make sure that the menu will close, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($){
  $('.x-nav li a').click(function(e){
    
    var hash = $(this).attr('href').split("#").slice(-1)[0];
    var outbound = /^https?:\/\//i;

    if(hash && !outbound.test( $(this).attr('href') )) {
	    e.preventDefault();
	    $('html,body').animate({
	      scrollTop: $('#' + hash ).offset().top - $('header.masthead').height()
	    },700 ,'swing');
	    $('.x-btn-navbar').click();
	}

  });
});

We would loved to know if this has work for you. Thank you.

[Nayuk01]

Worked perfectly. Thank you!

I do have one more question relating to it though. Is there a way to make the drop-down menu automatically close (but menu icon remain at the top of the screen) on scrolling so that the menu doesn’t take up the majority of the screen? Rather than having to do it manually.

Thank you again

Naomi

[Paul R]

Hi Naomi,

You can add this in Appearance > Customize > Custom > Javascript

jQuery(function($){
	$(".x-navbar .mobile .x-nav li > a").on( "click", function() {
		$('.x-btn-navbar').click();
	});
});

Hope that helps.

[Nayuk01]

Hey Paul,

That last one did not work unfortunately. Is there anything else I can try?

Thanks

Naomi

[Jade]

Hi Naomi,

Please update this code:

jQuery(function($){
  $('.x-nav li a').click(function(e){
    
    var hash = $(this).attr('href').split("#").slice(-1)[0];
    var outbound = /^https?:\/\//i;

    if(hash && !outbound.test( $(this).attr('href') )) {
	    e.preventDefault();
	    $('html,body').animate({
	      scrollTop: $('#' + hash ).offset().top - $('header.masthead').height()
	    },700 ,'swing');
	    $('.x-btn-navbar').click();
	}

  });
});

to

jQuery(function($){
  $('.x-nav li a').click(function(e){
    
    var hash = $(this).attr('href').split("#").slice(-1)[0];
    var outbound = /^https?:\/\//i;

    if(hash && !outbound.test( $(this).attr('href') )) {
	    e.preventDefault();
	    $('html,body').animate({
	      scrollTop: $('#' + hash ).offset().top - $('header.masthead').height()
	    },700 ,'swing');
	    $('.x-btn-navbar').click();
	}

  });

  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });

});

Hope this helps.

[Nayuk01]

I believe I changed it correctly but it’s still the same on my phone unfortunately.

Naomi

[Paul R]

Hi,

In that case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Author]

Posts