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 about 1 year 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 about 1 year ago

 

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

 

Roger Pack about 1 year ago

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

wendy Calvin about 1 year 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 9 months ago

Add to your CSS:

 

.is-at-bottom {

  top: 0 !important;

}