Menu icon Foundation
Mobile sticky menu negative margin appears

Hi guys,

I'm doing mobile sticky menu and meet some annoying problem - when I scroll my website on mobile, after half page it adds some negative margin on top, so part of navbar becomes behind canvas.

This is when the page loads, on top everything is ok

this is when scrolled down

 

I do it this usual way:

 

 <div data-sticky-container>
            <div class="sticky" data-sticky data-options="marginTop:0; stickTo:top; stickyOn:small;" style="width:100%">
                <div class="top-bar">
                    <div class="top-bar-right">
                      <button class="menu-icon" type="button" data-toggle="offcanvas-full-screen"></button>
                    </div>
                </div>
            </div>
        </div>

 

Yes, there's an option "marginTop:0", I can adjust it to "1", then it will work, but in the beginning I will have blank space before navbar

 

can you please help with it?

 

 

 

 

 

 

 

foundation 6stickymenumobilenavbar

Hi guys,

I'm doing mobile sticky menu and meet some annoying problem - when I scroll my website on mobile, after half page it adds some negative margin on top, so part of navbar becomes behind canvas.

This is when the page loads, on top everything is ok

this is when scrolled down

 

I do it this usual way:

 

 <div data-sticky-container>
            <div class="sticky" data-sticky data-options="marginTop:0; stickTo:top; stickyOn:small;" style="width:100%">
                <div class="top-bar">
                    <div class="top-bar-right">
                      <button class="menu-icon" type="button" data-toggle="offcanvas-full-screen"></button>
                    </div>
                </div>
            </div>
        </div>

 

Yes, there's an option "marginTop:0", I can adjust it to "1", then it will work, but in the beginning I will have blank space before navbar

 

can you please help with it?