SOLVED (kinda) Stack conflict: Wills Gateway and UIkit Scroll function

@willwood @Lucas

Evening gents. I’ve hit a snag with a UIkit site I’m building…

https://www.bikeboxni.com/

Password is 1234

If you click the hamburger and click one of the links, for instance “Book”, you should be scrolled to here: https://www.bikeboxni.com/#book but unfortunately it’s not working, removing the Gateway stacks allows it to work as expected.

The button in the main menu next to the hamburger also links to the “Book” section, and this works fine. It only seems to be scroll links in the “Offcanvas” menu.

I wonder if either of you can shed any light on this, and perhaps a fix?

Thanks.

FYI Your BOOK button is set to go to #buy and your Book sidebar nav link is set to go to #top.

Not for me they don’t! And they’re not set as such. See screenshots and check the url bottom left.

Or, am I misunderstanding you?

Oh, yes, in Inspect I see what you mean!

That’s odd.

Any ideas as to why?

EDIT: Worked it out: Previously the bottons were set as “Links”, and had #top applied as the URL. I then turned them to “Buttons” and put them inside a Scroll stack, but didn’t remove the old link before changing their use from “Link” to “Button”.

Done that now, but still not working, expect when Gateway is removed.

Thanks for the heads up on that though.

Basic schoolgirl operator error I suspect:)

Yep: (See above, edited).

Not fixed it though :-(

Another call out on this for help now from anyone!

Both the devs have been in touch, but thus far a solution hasn’t been found, so I’m hoping the wider RW community can help.

I\ve made a stripped down version of the page: http://bikeboxni.com/gateway/

The problem is that if you open the menu and click the “Book” button the page scrolls as it should to the “Book a box” section. But then it returns back to the top of the page.

This only happens when the Gateway stack is on the page. When I remove it, the page scrolls and remains in place, at the “book a box” section.

UIkit is my new “go-to” framework (It’s really really good), and Gateway is on all my sites as it forms the basis of my cookie control, so it’s vital I get these stacks working together nicely.

All help appreciated.

UPDATE for anyone, and @Lucas and @willwood

I’ve just made a small change to the test page: I removed the animation from the opening of the menu, and the page is no longer jumping back to the top. Demo of this is here (page2): http://bikeboxni.com/gateway/page/

The original test page with animation applied, and so the issue still present is here: http://bikeboxni.com/gateway/

The only difference between those two pages is the one that works has no animation, the one that doesn’t work, does.

This leads me to think that perhaps the issue is related to Javascript?

On the original page (now with the password protect removed): http://bikeboxni.com/ I tried removing the animation from the menu opening, but it made no difference. However, there is still a lot of other animation on that page (scrolling links etc.) so again this makes me look towards a JS issue.

I would appreciate if you can both look at this with fresh eyes. I appreciate your comments back to me via email, and it’s all valid, but I really to find a solution to this, or if one can not be found I need to look at changing my tools. But that is the last resort for me.

All feedback, from the devs and/or anyone else appreciated, I’m totally stuck at the mo!

Thanks @lucas for trying to help on this, but after some other communications this morning I’ve concluded my best way forward is to remove Gateway and use an alternative solution.

For any other UIkit users out there who read this and hit the same issue, sadly it seems there isn’t a solution, so best to find an alternative.

I’ll mark this as solved, but leave for future reference.