offcanvas menu link broken

Question

I'm working on a project for school, and I'm having an issue that I hope someone will be able to help with (and possibly curb my festering hatred for joomla, but that's beside the point :)

First, here's the URL: http://edcc3.cloudaccess.net

The issue is, when you resize the browser or use an emulator to see the rendering on 480px devices, the offcanvas menu links won't work. Meaning they don't scroll to the targetted sections within the one page layout, and I cant figure out why. I'm betting it's an ordering issue but for the life of me I can't find the problem. Any help would be appreciated!

Answer 1

Right, I've written a small example for you which I've tested and works:

HTML:

<a id="test" href="#test" data-uk-smooth-scroll="">Item</a>

jQuery:

$('#test').on('click', function() { 
    $.UIkit.offcanvas.hide();
});

The above jQuery code, detects a click on the defined ID of the menu item and closes the offcanvas display. The anchor/scroll will then kick in.

Do note that as this is Joomla, you may have to perform a Template Override for the menu, which Yootheme have already done.

Hope this helps