Foundation 6 off-canvas not closing

Question

I have the following link: http://www.alessandrosantese.com/test/aldemair-productions/

when you click on the skip button in the middle you will get to the next slide whic has a FOundation 6 off canvas implemented.

My header which includes the the button to the toggle the off-canvas is outside of the off canvas menu it looks like that:

        <header class="fixed close">
            <div class="hamburger" data-toggle="sth">
                <button type="button">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <span class="menu">Menu</span>
            </div>
            <div class="logo">
                <h1>Aldemar</h1>
                <span>productions</span>
            </div>
            <span class="mail-icon float-right" data-open="contact-us">
            </span>
        </header>

I have the following js to close the off-canvas menu:

$('.hamburger').on('click', function(e){
    e.preventDefault();
    if($('header').hasClass('close')){
        $('header').removeClass('close').addClass('open');
        $(this).find('button').toggleClass('open');
        $('body').addClass('block-view');
    }
    else {
        $('.off-canvas').foundation('close');
        $('header').removeClass('open').addClass('close');
        $(this).find('button').toggleClass('open');
        $('body').removeClass('block-view');
        $('#sth').foundation('close');
    }
});

but this doesn't work: $('#sth').foundation('close'); it doesn't close the menu

Answer 1

It looks like the div with the class off-canvas-wrapper-inner still has the classes is-off-canvas-open and is-open-left when the menu is closed and the header slides back to the left. Try removing those classes after $('header').removeClass('open').addClass('close') .

Alternatively, if it's possible to set up the Foundation off-canvas classes per the docs ( http://foundation.zurb.com/sites/docs/off-canvas.html ), you shouldn't need to write a custom event to toggle the menu.

Answer 2

So after removing "data-toggle="sth"" I have updated my js as follow:

$('.hamburger').on('click', function(e){
    e.preventDefault();
    if($('header').hasClass('close')){
        $('header').removeClass('close').addClass('open');
        $(this).find('button').toggleClass('open');
        $('body').addClass('block-view');
        $('#sth').foundation('open');
    }
    else {
        $('.off-canvas').foundation('close');
        $('header').removeClass('open').addClass('close');
        $(this).find('button').toggleClass('open');
        $('body').removeClass('block-view');
        $('#sth').foundation('close');
    }
});

I had to manually open and close the menu