Header Builder - Mobile - One page nav issue

rad · May 28, 2018, 12:09pm

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!

Pbalazs89 · May 28, 2018, 12:28pm

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!

rad · May 28, 2018, 2:43pm

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!

Pbalazs89 · May 28, 2018, 3:03pm

Hi @Rad,

Thanks, that does close the mobile menu, but the link itself does not register. Any idea why?

rad · May 28, 2018, 4:29pm

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!

Pbalazs89 · May 28, 2018, 6:38pm

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!

nabeel · May 28, 2018, 6:59pm

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.

Pbalazs89 · May 28, 2018, 7:12pm

Hi,

Thanks for the tip.
Removed the old and input the new code. Unfortunately it did not do the trick.

nabeel · May 28, 2018, 7:24pm

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!

Pbalazs89 · May 28, 2018, 7:53pm

Something weird is going on. I found the code you mentioned and updated it, but the error is still there. To clear the cache, I disabled plugins, and changed the theme. However, when I change it back, and open up cornerstone - edit js - the code reappears, what can be the cause?

nabeel · May 28, 2018, 8:11pm

Hi again,

This is usually the cache issue, please check if your server is caching your site. Please try following this thread as you’re also having a similar issue https://theme.co/apex/forum/t/cannot-delete-custom-css-code-on-a-single-page/20772/8

Let us know how this goes!

Pbalazs89 · May 29, 2018, 8:09am

Hi there, I tried on numerous computers and did so with incognito mode, and any changes I make with the JS are not reflected. Is this code accessible in CPANEL somewhere? Or how is it stored?

Hi there, so as a workaround, I recreated the page. the JS code wasnt copied through templates so YAY!
However, the mobile menu still does not scroll where it needs to when I click on #restaurants. Ideas?
Okay, so the problem persists though. I recreated the page, but now I can’t add anything to cornerstone page css. After I save and refresh, it is gone. Any ideas?

Also, weirdly enough. I thought of using the style.css in the theme folder, so I added .floatright {float:right;}

It also did not register.

christopher · May 29, 2018, 9:46am

Hi @Pbalazs89,

I am not sure why this is happening, most of the time the problem is cache as we do not have such a problem that added JS code not reflected.

Please contact your hosting service provider and ask them to clear cache if they have such a method implemented.

Meanwhile, I do need to ask you to wait for the new release for the original question that you had. The new version is on the final steps of the beta testing and I hope it will be available next week on a manual download.

Thank you for your patience.

BenRyan_me · May 29, 2018, 10:18am

This is great, but I’ve found if you have a link to another page within your menu, it doesn’t load? Any ideas?

I’m having this issue with the mobile version on this page when ever you click on “Registry Style Marriages”

rad · May 29, 2018, 10:51am

Hi @BenRyan.me,

It’s the main purpose of one-page navigation, it’s only restricted to the same page it links to. But again, the above code should have no effect on other menu items so they should link okay (which I confirmed working).

Perhaps the upcoming version has a different way of handling this linking.

Thanks!

BenRyan_me · May 29, 2018, 10:55am

When I enter responsive design mode in Safari, the link works. As soon as I test it on an actual mobile, nothing.

rad · May 29, 2018, 12:13pm

Hi there,

That issue should be fixed by this line $('#menu-item-1442 a').off('touchend touchstart');, since iOS behaves different with touch events. Try increasing the delay value 750 to 1500, or greater. The 1000 is equal to 1 second.

Thanks!

jo3 · May 30, 2018, 2:07am

hi,

So, does this topic already solve the problem for mobile and one page issue?

Or still struggling something?

I have found the alternative way to nearly achieve such issue as below.

I would like to hear your idea about it.

Put Navigation Collapsed menu and set with the custom menu.

When making the custom menu, usually set the link like,

(href=) “/permalink” or href=“https://xxxx.com/permalink” in the WP menu setting.

Then for in-page navigation case, it goes with “#”+ anchor text

(href=) “/#anchor-text” or href=“https://xxxx.com/permalink#ancho-rtext”

I changed them to

(href=) “/#anchor-text/” or href=“https://xxxx.com/permalink#ancho-rtext/”

I include “/” back-slash at the end of the anchor text.

This causes Syntax error but WORDPRESS leads the right position on the right page and X-off menu or contents close automatically in FIREFOX but not for in ipad.(safari)

I have checked on PC and android devices.

and If I go that page without #anchor-text, off-canvas close automatically.

This means “#” causes error so that Canvas remains open.

Side menu is very nice function and look forward to update.

Thanks

paul.r · May 30, 2018, 4:29am

Hi,

Your onepage menu should only have anchor text as link.

eg.

href= "#anchor-text"

You will then need to add the code below in Theme Options > JS to make the canvas close.

jQuery ( document ).ready ( function($) {
 $('a[href^="#"]').on('click touchstart',function(e) {
setTimeout ( function() {
           jQuery('.x-off-canvas').trigger('click');
}, 750 );
} );
} );

Hope that helps

system · June 9, 2018, 4:29am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.