Menu icon Foundation
off canvas not working with sticky top-bar when scroll down

off canvas not working with sticky top bar only when i scroll down or when top-bar becomes sticky

Foundation 5offcanvas

off canvas not working with sticky top bar only when i scroll down or when top-bar becomes sticky

Yasir about 5 years ago

what is this ?

Yasir about 5 years ago

forgot to mention it stops working when top-bar becomes sticky ONLY on mobile ( iphone i tested ) works fine on desktop, but i need it for mobile not desktop :)

Yasir about 5 years ago

CODE I'M USING

IT WORKS FOR DESKTOP BUT NOT MOBILE

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
     <!-- OFF CANVAS MENU BAR -->
     <div class="sticky contain-to-grid"> 
        <nav class="tab-bar hide-for-large-up "data-topbar data-options="sticky_on: all">

            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>

            <section class="right tab-bar-section">
                <h1 class="title">Menu</h1>
            </section>

        </nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->
 </div>
        <!-- OFF CANVAS MENU -->
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Navigation</label></li>
                <li><a href="index.html">Home</a></li>
            </ul>
            <ul class="off-canvas-list">
                <li class="has-dropdown"><a href="blog.html">Blog</a>
                    <ul class="off-canvas-list">
                        <li><a href="blog.html">Archive</a></li>
                        <li><a href="post.html">Single</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="off-canvas-list">
                <li class="has-dropdown"><a href="page.html">Page</a>
                    <ul class="off-canvas-list">
                        <li><a href="page.html">Full-width</a></li>
                        <li><a href="sidebar-left.html">Left Sidebar</a></li>
                        <li><a href="sidebar-right.html">Right Sidebar</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="off-canvas-list">
                <li><a href="portfolio.html">Portfolio</a></li>
            </ul>
        </aside>
  <!-- HEADER SECTION -->
<header>
    <div class="row">
        <div class="small-12 medium-12 large-12 columns">
            <div class="logo">
                <h1>Foundation 5 Topbar / Offcanvas menu</h1>
            </div> <!-- END DIV.LOGO -->
        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</header> <!-- END HEADER -->
 <!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
    <div class="row">
        <div class="large-12 columns">

            <!-- TOP BAR INITIALIZATION -->
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1></h1>
                    </li>
                </ul> <!-- END UL.TITLE-AREA -->

                <!-- TOP BAR MENU ELEMENTS -->
                <section class="top-bar-section">
                    <ul class="left">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="has-dropdown">
                            <a href="blog.html">Blog</a>
                            <ul class="dropdown">
                                <li><a href="blog.html">Archive</a></li>
                                <li><a href="post.html">Single</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="page.html">Page</a>
                            <ul class="dropdown">
                                <li><a href="page.html">Full-wdith</a></li>
                                <li><a href="sidebar-left.html">Left Sidebar</a></li>
                                <li><a href="sidebar-right.html">Right Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li class="has-dropdown">
                            <a href="#">Dropdown</a>
                            <ul class="dropdown">
                                <li><a href="#">First link in dropdown</a></li>
                                <li><a href="#">Second link in dropdown</a></li>
                                <li><a href="#">Third link in dropdown</a></li>
                            </ul>
                        </li>
                    </ul>
                </section> <!-- END SECTION.TOP-BAR-SECTION -->
            </nav> <!-- END NAV.TOP-BAR -->

        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->
<!-- MAIN SECTION -->
<section class="main-section">
    <!-- CONTENT SECTION -->
    <section class="full-width content-section">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <h2>Moving aside for the Offcanvas people!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
            </div> <!-- END 12 COLUMNS -->
        </div> <!-- END ROW -->
    </section> <!-- END SECTION.CONTENT-SECTION -->

    <!-- SERVICES SECTION -->
    <section class="full-width services-section">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
            </div>

            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
            </div>

            <div class="small-12 medium-4 large-4 columns">
                <h3>Service #3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
            </div>

        </div> <!-- END ROW -->
    </section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

    <!-- CALL 2 ACTION -->
    <section class="full-width call-to-action">
        <div class="row">
            <div class="small-12 medium-12 large-12 columns">
                <a href="#" class="button radius">Get in touch with us!</a>
            </div>
        </div>
    </section>
</section> <!-- END SECTION.MAIN-SECTION -->
 <!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

    </div>
</div> <!-- END OFF CANVAS -->
<!-- FOOTER SECTION -->
<footer>
    <div class="row">
        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>

        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>

        <div class="small-12 medium-4 large-4 columns">
            <h4>Foundation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
        </div>
    </div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
    <div class="row">
        <div class="small-12 columns">
            <p>&copy; 2014</p>
        </div> <!-- END 12 COLUMNS -->
    </div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->
   <script src="<?php bloginfo('template_directory'); ?>/js/vendor/jquery.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/foundation.min.js"></script>

    <script>
    //load foundation scripts
      $(document).foundation();

    </script>

Matt H about 5 years ago

why would you make off canvas sticky instead of fixed?