[Christian LParticipant]

Right now in mobile view the navbar menu stays extended after selecting a link which make navigation confusing. How can I make it retract after a selection.

Thanks,

Christian

[Kosher KMember]

HI Christian,

Im not sure what you really mean. Did you have one page navigation?

When a link is click, your site reloads and off course the nav bar will close.

Can you please provide URL to your site?

Thanks

[Christian LParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Christian,

Thank you for writing in!

You can achieve this by adding the following JS code in Customizer > Custom > JavaScript:

jQuery(document).ready(function($) {
  $('.x-navbar .x-navbar-inner .x-nav-collapse .x-nav a').click(function(){
    $('.x-nav-collapse.in.collapse').removeClass('in').css();
  });
});

Hope this helps. 🙂

Thank you.

[Christian LParticipant]

I entered this in customizer and no effect. Do I have to activate it somehow?

[Christian LParticipant]

this also seems to have sometimes disabled my static nav button in mobile view without causing automatic closing. 🙁

[ChristianModerator]

Hey Christian,

Please try

jQuery(document).ready(function(jQuery) {
  jQuery('.x-navbar .x-navbar-inner .x-nav-collapse .x-nav a').click(function(){
    jQuery('.x-nav-collapse.in.collapse').removeClass('in').css();
  });
});

Thanks.

[Christian LParticipant]

Hi, I tried that as well to seemingly no effect. I am supposed to put in the customizer, right?

[Christian LParticipant]

i am on a godaddy server, could that be a problem?

[RadModerator]

Hi Christian,

You have two problem, you’re using one page navigation with mix of relative url and absolute url.

Example are #Reservations and http://fubarla.com/x/portfolio/

When user navigate to your portfolio, they can’t go back to #Reservations because it’s relative to current url. Thus making relative url to http://fubarla.com/x/portfolio/#Reservations which is not valid.

If you intend to use this setup, then this will help you http://theme.co/x/member/forums/topic/nav-bar-not-fully-working-on-1-page-scrolling/#post-45754 (Note that using this will require you to define your menu url as absolute, eg. http://fubarla.com/x/#Reservations and not just #Reservations)

Then use this to toggle your mobile menu, :

jQuery(document).ready(function($) {
  $('.x-navbar .x-navbar-inner .x-nav-collapse .x-nav a').click(function(){
  $('.x-btn-navbar').click(); 
  });
});

Cheers!

[Christian LParticipant]

This is awesome, I am almost there!!! In mobile view the accuracy of the link is good and then there is a shift. I looked through the posts and removed the word ‘shift’ but it still persists. Is there an possibility that this can be negated somehow? Thanks so much!

[Christian LParticipant]

The links are working fine on a PC, but on the mobile I am still getting the sliding backwards. Just fyi. Not sure what setting I am missing.

thanks again!

[Christian LParticipant]

I believe I fixed this by removing the offset, because I also have the menu bar close, I think it was trying to compensate for this menu still being open.

Check to make sure if you have the time that this is an appropriate solution for this.

Thanks!

[RadModerator]

Hi Christian,

From the code from other thread, change this code :

$('html,body').animate({ scrollTop: $('#' + hash ).offset().top - $('.x-navbar').height()},700 ,'swing');

Into this :

setTimeout( function(){
$('html,body').animate({ scrollTop: $('#' + hash ).offset().top - $('.x-navbar').height()},700 ,'swing');}, 700 );

Just change the 700 until your desired result.

Thanks!

[Christian LParticipant]

This stopped working. It was working great, now it doesn’t time out on my iPhone. I have in my java script in customizer

jQuery(document).ready(function($) {
$(‘.x-navbar .x-navbar-inner .x-nav-collapse .x-nav a’).click(function(){
$(‘.x-btn-navbar’).click();
});
});

setTimeout( function(){
$(‘html,body’).animate({ scrollTop: $(‘#’ + hash ).offset().top – $(‘.x-navbar’).height()},700 ,’swing’);}, 0 );
//Now add active status for automatic scrolling
$(‘.x-nav li’).removeClass(‘current-menu-item’);
$(this).parent().addClass(‘current-menu-item’);

}

});

[Author]

Posts