Menu icon Foundation
off-canvas links disappear at small breakpoint

Possible bug:

I want to display the off-canvas link at small viewport only.  The problem is that the menu links disappear when you resize from medium down:

To reproduce:

1.  Load the page with browser at medium or above

2. Resize window to below 640px wide.

3. Off Canvas menu icon should appear

4. Click the icon to show the OC menu, the links are not present in the Off Canvas menu

5. Reload the page and open the OC menu again - links should now be present

(couldn't create a codepen because @include not supported)

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical menu" data-drilldown>
            <!-- start of the drilldown multi level menu -->
            <li>
            <a>Item 1</a>
            <ul class="vertical menu">
                <li><a href="#">Item 1A</a></li>
                <li><a href="#">Item 1B</a></li>
                <li><a href="#">Item 1C</a></li>
                <li><a href="#">Item 1D</a></li>
                <li><a href="#">Item 1E</a></li>
            </ul>
            </li>
        </ul>
    </div>
    <div class="off-canvas-content"
        data-off-canvas-content>
        <div class="title-bar">
            <div
                class="title-bar-left">
                <button
                    class="menu-icon"
                    type="button"
                    data-open="offCanvasLeft"></button>
                <span
                    class="title-bar-title">Foundation</span>
            </div>
        </div>
        <div>
            <p>Content is only viewable at 'small' viewport</p>
        </div>
    </div>
</div>

And this css:

.off-canvas-wrapper {
    @include breakpoint(medium up) {
        display: none;
    }
}

 

I am using Foundation for Sites 6.2.0

offcanvas

Possible bug:

I want to display the off-canvas link at small viewport only.  The problem is that the menu links disappear when you resize from medium down:

To reproduce:

1.  Load the page with browser at medium or above

2. Resize window to below 640px wide.

3. Off Canvas menu icon should appear

4. Click the icon to show the OC menu, the links are not present in the Off Canvas menu

5. Reload the page and open the OC menu again - links should now be present

(couldn't create a codepen because @include not supported)

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical menu" data-drilldown>
            <!-- start of the drilldown multi level menu -->
            <li>
            <a>Item 1</a>
            <ul class="vertical menu">
                <li><a href="#">Item 1A</a></li>
                <li><a href="#">Item 1B</a></li>
                <li><a href="#">Item 1C</a></li>
                <li><a href="#">Item 1D</a></li>
                <li><a href="#">Item 1E</a></li>
            </ul>
            </li>
        </ul>
    </div>
    <div class="off-canvas-content"
        data-off-canvas-content>
        <div class="title-bar">
            <div
                class="title-bar-left">
                <button
                    class="menu-icon"
                    type="button"
                    data-open="offCanvasLeft"></button>
                <span
                    class="title-bar-title">Foundation</span>
            </div>
        </div>
        <div>
            <p>Content is only viewable at 'small' viewport</p>
        </div>
    </div>
</div>

And this css:

.off-canvas-wrapper {
    @include breakpoint(medium up) {
        display: none;
    }
}

 

I am using Foundation for Sites 6.2.0