Close Mobile Nav on Click

Support
#1

Hello,

Themeco X, all default, shows the mobile nav icon top right, when screen width is below 768px. Lets imagine this menu contains links from the same URL, like #anchors. And the user clicks those, so the browser scroll to the appropriate anchor. Fine. But: the Menu does not close. And it overlays the content. So Small Device + Mobile Nav + Anchor Links + Click = User sees nothing, except menu.

Is there a way to close the menu on click, on any device, just like it happens when changing the URL ?

#2

Hi there,

Please add this code in the custom CSS:

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

Hope this helps.

Close burger menu on Anchor link click
#3

Hi,

used that code already, looks like it could work, does not work in iPhone IOS11 (menu does not close).

See secure note for demo!

All best
Jan

#4

Hi there,

Unfortunately, the given URL in the Secure Note is behind a password and the password is not given to us to be able to test the case.

I suggest that you make sure that you clear the IOS Safari browser cache before testing the addition of the code above.

Also the code above should be added to X > Launch > Options > JS and not CSS.

Thank you.

#5

Password added to secure note.

#6

Hi there,

I have just checked your site on an iPhone - iOS 11 and the mobile menu automatically closes as you tap a menu item.

See screencast in the secure note.

Kindly clear the cache of your phone browser.

#7

hey @jade can you provide some code for pro too?

jQuery(function($) {
  $('.x-menu a').on('touchend click', function(){
    $('.x-off-canvas-close').click();
  });
});

seems to work pretty well :slight_smile:

1 Like
#8

Hi there,

Glad to hear you got it sorted.

Cheers! :slight_smile: