Hi there,
I have a page at:
Thing is, on mobile, I have an element called “hol vagyunk?” this navigates to a section on desktop and on mobile. However, when I click on “hol vagyunk?” the menu does not close and the user has no indication that in the background he has been renavigated. Is there a way to fix this, say, automatically close the menu when they click on the link?
Thanks!
Hey @Pbalazs89,
Please add this code in your Global JS.
jQuery('.x-menu .x-anchor').on('touchend click', function() {
jQuery('.x-off-canvas').trigger('click');
});
Hope that helps.
Hi there,
It helped on the mobile. But right now I’m trying to use the menu on an ipad mini, and it will not load anything.
Any idea why?
Using chrome.
Thanks!
Hi @Pbalazs89,
We already have a fix regarding this case which will be available in the upcoming release which is version 2.1 of Pro:
Updated: Close modal, off canvas, or dropdown when navigating to an anchor.
Please stay tuned for the release which will be available about a week as the beta testing process has begun today.
Please consider the timeframe my personal speculation and not an official statement.
Thank you for your understanding and patience.
I’m having the same problem - one page navigation keeps the modal / menu open when a link is clicked. I assume this update will fix the issue for all forms of mobile navigation (off canvas modal etc)
Hi @egos,
Yes here is the exact quote from our internal changelog:
Updated: Close modal, off canvas, or dropdown when navigating to an anchor.
The changelog mentioned Off Canvas, Modal and Dropdown.
Thank you.
Hi there,
Any news regarding when the new version is expected to drop?
Thanks!
Hi there,
Any new estimations? 
Also, a workaround for me would be fine. Basically, I received this JS code:
jQuery(’.x-menu .x-anchor’).on(‘touchend click’, function() {
jQuery(’.x-off-canvas’).trigger(‘click’);
});
Is there a way to have this effect only one of my LI items? Namely - ‘Hol vagyunk’
The other items would then just navigate to the other pages, and from what I seen the code does what it needs to in case of one page nav.
Thanks!
Hi there,
Please try this code instead of that one,
jQuery( document ).on( 'touchend click', '.x-masthead #menu-item-361 a', function() {
jQuery('.x-off-canvas').trigger('click');
} );
Thanks!
Hi there,
I replaced the code in global settings, but it does not seem to do the trick:
Éttermek is the item on mobile that should scroll down to the essential grid section and close off the mobile menu. It does not. Any idea why?
Also, another quick question: Mobile Menu
In it’s natural position, it looks fine, however, if I start scrolling it sticks to the top and part of it is cut off. I was experimenting with making the menu smaller on mobile and used % as margin. That might be the cause. How can I position it a bit towards the top without causing this issue?
Thanks!
Hi @Pbalazs89,
Would you mind clarifying if it’s Hol vagyunk or Éttermek? I’m a bit confuse of how it should really work. Plus, the scrolling has nothing to do with this code, this will only toggle the menu canvas.
It will require another customization for scrolling just to change the scroll position since it’s not primarily configured for one-page navigation. Unfortunately, one-page navigation isn’t fully working on current Pro Version, but should be okay in the upcoming version. Something may change and this custom code may affect it.
Thanks!
I’m sorry, I’ve been asked to change some name’s around so I know it must be frustrating. Thanks for the patience.
So I have a one page navi thing going on on the homepage. The only such element is ‘Hol vagyunk.’ This works fine on desktop, it rolls down to the given section with the id #restaurants.
However, this can be misleading on mobile, since the menu usually stays open, and the user has no clue that in the background the page has rolled down. Hence the need to close the menu after pressing this particular item.
I added the code you have given me, and updated it to point to the new li element with the following class: menu-item-1442
Anyway, I click on it and nothing happens right now. Can you have a look? Thanks!
Hi there,
In that case, please change that code to this
jQuery ( document ).ready ( function($) {
setTimeout ( function() {
$('#menu-item-1442 a').off('touchend touchstart');
jQuery( document ).on( 'touchend click', '#menu-item-1442 a', function() {
jQuery('.x-off-canvas-close').trigger('click');
} );
}, 750 );
} );
Thanks!
Hi @Rad,
Thanks, that does close the mobile menu, but the link itself does not register. Any idea why?
Hi @Pbalazs89,
You mean the scrolling?
What do you mean it’s not registering? Is it to scroll or link? Seems to be okay on my end. The code only targets that specific menu item so other menu items should link just fine.
Thanks!
Hi @Rad,
What I mean is that, when I click on it, the menu closes. Yay!
But nothing happens, it does not scroll to #restaurants, and when I click on the menu to check the url, the url stays: padthai.decorolux.com and not padthai.decorolux.com/#restaurants. Nay!
This is what I mean by the link not registering.
Thanks!
Hi again,
I checked your page and I see an error in browser’s console which is breaking jQuery on your site, please edit your homepage in Pro content builder then go to JS section and find the following code:
$('.tg-media-button').removeAttr('data-tolb-src');
Replace it with:
jQuery('.tg-media-button').removeAttr('data-tolb-src');
Let us know if this fixes the issue.
Hi,
Thanks for the tip.
Removed the old and input the new code. Unfortunately it did not do the trick.
Hi again,
I am still seeing the old code in your site:
which is generating the following error:
This could be the cache issue, please clear all caches including browser cache then deactivate your caching plugins and other optimization plugins. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
Let us know how this goes!