CODEWITHSUNDEEP
jqueryhtmlcsszurb-foundation
szamo
szamo

Reputation: 33

sticky nav for mobile/large foundation 6

I want to learn foundation 6 but I have big problems to understand why it doesn't work and what am I doing wrong.

I want to make sticky nav bar for small device and medium/large. for large it does work, for mobile it isn't sticky, just stays at the top....

what am I doing wrong? I add div the same like for large, data-sticky-container and sticky class.... nav on large scroll, but nav on small/mobile doesn't scroll....

http://codepen.io/paulcrowski/pen/ENBJVe

<div data-sticky-container>
        <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
            <div class="off-canvas-content" data-off-canvas-content >
                <div class="title-bar show-for-small-only">
                    <div class="title-bar-left">
                        <button class="menu-icon" type="button" data-open="mobile-menu"></button>
                        <span class="title-bar-title">Menu ver0.1mob</span>
                    </div>
                    <div class="title-bar-right">
                        <button class="menu-icon" type="button" data-open="basket-right"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 1205

Answers (1)

Ross
Ross

Reputation: 2141

You need to add data-sticky-on="small" attribute to your data-sticky container. Default value for data-sticky-on is medium.

Upvotes: 3

Related Questions