vmitsaras/js-offcanvas

Push option does not work

vaclavgreif opened this issue · 5 comments

vaclavgreif commented

Hello,
I'm trying to make the push work using this code:

    $('#nav-offcanvas').offcanvas({
        modifiers: 'right, push', // default options
        triggerButton: '#offcanvas-toggle' // btn to open offcanvas
    });

That does not work for me, still getting the overlay nav. Am I missing something?

Thanks!

vmitsaras commented

Demosite?
What's your Markup?
Are you overwriting the Options through data-options?

vaclavgreif commented

Hello, no, I'm just initializing the offcanvas using JS.

My JS looks as posted above, the offcanvas div is just an empty div with Wordpress menu:

<div id="nav-offcanvas" class="navmenu">
            <?php
            FLTheme::nav_search();

            wp_nav_menu(array(
                'theme_location' => 'header',
                'items_wrap' => '<ul id="%1$s" class="nav navbar-nav navbar-right %2$s">%3$s</ul>',
                'container' => false,
                'fallback_cb' => 'FLTheme::nav_menu_fallback',
            ));

            ?>
        </div>

It can be seen live on http://wp-programator.cz/

Anything I need to add to the markup?

Thanks!

vmitsaras commented
  • match the transitions for all elements (page, panel & overlay)
  • apply transform to the page
.c-offcanvas, 
.c-offcanvas-bg, 
.fl-page {
  transition: transform .5s ease;
}

.fl-page  {
  overflow: hidden;
  backface-visibility: hidden;
}

.fl-page--right.is-open {
  transform: translate3d(-17em,0,0)
}
vaclavgreif commented

Thanks, that works, but shouldn't that be handled automatically when using the push option?

  • 😄1