Foundation Off-Canvas sticky menu bar to stick to bottom

Question

I am trying to create an off-canvas menu with foundation 6 like it's done in the official site.

When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen.

.title-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
}

But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed.

Anyone had this problem and solved it yet?

Visit the link, edit the css code like this: `position: fixed; bottom: 0; width: 100%; z-index: 100;` — Guido Gallenkamp, Aug 30 '16 at 11:56
You can see the effect here: https://jsfiddle.net/nuom3h5y/4/ — Guido Gallenkamp, Aug 30 '16 at 13:50

score 2 · Answer 1 · answered Aug 30 '16 at 15:20

There are a few changes to be made.

The <div class="content"> should be mentioned inside the <div class="off-canvas-content">. Off-canvas is designed to work with contents written inside its off-canvas-content class.
The <div class="off-canvas-content"> should be pushed to use the complete vertical height. You can mention, height:100vh; although, beware of the browser compatibility.
The <div class="off-canvas position-left"> gets another class is-open added to it, whenever the menu icon is toggled. Like point 2, this should also be pushed to use the entire vertical height.

Here is a working example for your reference.

Note: If you feel the transition is a bit odd, install motion-ui and apply some transition.

1 Answers1