Href Anchors in Offcanvas Mobile Menu

Hi,

Can you please post your site url so I could check the code ?

Thanks!

Here is the link. Sorry, I had it local development only, but I just uploaded it.

As I mentioned before Anchor links work fine on desktop, but on mobile (or technically anything 48rem wide or under – when the offcanvas menu kicks in) anchor links do not stay.

A click scrolls you there and click off the offcanvas mobile menu immediately scrolls you back to the top.

It seems the key to this is in main.js for Gantry. All the Offcanvas code is in there. Is there an API call for main.js like Jquery.Uikit ($.UIkit.offcanvas.hide();)? Where I can close the offcanvas menu after clicking anchors? Others have used this solution and it tends to work by closing the menu and then scrolling without bouncing back up.

There is an API to control the Offcanvas via JS:

1. Open: G5.offcanvas.open();
2. Close: G5.offcanvas.close();
3. Toggle: G5.offcanvas.toggle();

Also, any element in the page can become a toggler by just adding a data attribute.

1. Open Element: data-offcanvas-open
2. Close Element: data-offcanvas-close
3. Toggle Element: data-offcanvas-toggle

Very simple, for instance the hamburger icon has a data-offcanvas-open while the overlay that appears when the offcanvas is open has a data-offcanvas-close.

Hope this helps!

Also the issue you mention initially is most likely a Firefox bug. Nothing in JS or CSS would cause this behavior.

Thanks!

I just want to add a comment, I discovered the elusive problem.

I forgot to post that you were correct, in a way. Firefox handles body styles and overflow different than, say, Chrome or IE.

Using this:

@-moz-document url-prefix() {
	html { overflow: hidden; height: 100%; }
	body { overflow: auto; height: 100%; }
}

At the top of my style sheet I was able to overcome the problem that only showed in Firefox (mobile and desktop) but not Chrome or any other browser.

I don’t believe most Gantry users will need this with the Hydrogen theme, however if you make any padding adjustments and/or add many rows of content to a one-page style web site and Firefox acts wonky on anchor links this is the cure.

An obscure problem for a rare need, but it’s fixed, works great and I really appreciate all your help!

Thank you for sharing your workaround with us ??