Menu icon Foundation
Sticky menu anchored to bottom on mobile

Hi, i made a sticky responsive menu and when on mobile, it automatically sticks to bottom. the class of the navigation element changes to .is-anchored .is-at-bottom

 

Here is some sample code from menu:

<div data-sticky-container>
    <header class="sticky" data-sticky data-options="marginTop:0;" data-sticky-on="medium" data-check-every=0  >
        <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
            <button type="button" class="menu-icon dark" data-toggle></button>
            <div class="title-bar-title">Menu</div>

...

 

Menu works fine on large but on mobile and small screens it jumps and anchored to bottom.

 

How can i prevent this?

 

stickymenuResponsivefoundation 6mobile

Hi, i made a sticky responsive menu and when on mobile, it automatically sticks to bottom. the class of the navigation element changes to .is-anchored .is-at-bottom

 

Here is some sample code from menu:

<div data-sticky-container>
    <header class="sticky" data-sticky data-options="marginTop:0;" data-sticky-on="medium" data-check-every=0  >
        <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
            <button type="button" class="menu-icon dark" data-toggle></button>
            <div class="title-bar-title">Menu</div>

...

 

Menu works fine on large but on mobile and small screens it jumps and anchored to bottom.

 

How can i prevent this?

 

Joseph McBroom over 1 year ago

Did you ever find a solution for this? I'm having the same problem.

Ale 11 months ago

If you guys still interested, please note that sticky needs to be declared for small to really stick to that size:

In this case it should be like this:

<header class="sticky" data-sticky data-options="marginTop:0;" data-sticky-on="small" data-check-every=0  >

Manisha Dedi 11 months ago

 

Did you ever find a solution for this?Krogerfeedback I'm having the same problem.

 

Roger Pack 9 months ago

See https://github.com/zurb/foundation-sites/issues/11098 I believe that's the same issue

wendy Calvin 9 months ago

Wahoo! it works! Thank you for your time and patience! I couldn't have gotten this going without your help. You man are a saviour. krogerfeedback paymydoctor

Igor 5 months ago

Add to your CSS:

 

.is-at-bottom {

  top: 0 !important;

}