Menu icon Foundation
Off Canvas TopBar fixed

I just finished my first Foundation comp and see how awesome and fast this can be, but I noticed the topbar makes no sense on mobile because it does not stay fixed at the top when the page is scrolled. Mobile devices require a visibly present nav.

I have seen plenty of examples of the off-canvas topbar online, so I am surprised Foundation doesn't have it since I think Foundation pretty much invented it, didn't they?

Most recently, I stumbled across a beautiful example at healthline (dot corn) just now and it reminded me I should go ahead and ask about this problem even though I already searched this forum and I didn't see any solution to the problem. Just more people asking about the same thing who never got a solution.

off-canvastopbar

I just finished my first Foundation comp and see how awesome and fast this can be, but I noticed the topbar makes no sense on mobile because it does not stay fixed at the top when the page is scrolled. Mobile devices require a visibly present nav.

I have seen plenty of examples of the off-canvas topbar online, so I am surprised Foundation doesn't have it since I think Foundation pretty much invented it, didn't they?

Most recently, I stumbled across a beautiful example at healthline (dot corn) just now and it reminded me I should go ahead and ask about this problem even though I already searched this forum and I didn't see any solution to the problem. Just more people asking about the same thing who never got a solution.

This post has been closed. No new replies can be added.

Rafi Benkual about 4 years ago

We've had lots of requests for this and unfortunately it's not as straight forward as we'd like (especially without breaking changes).

The trick is to scroll the page, open the off-canvas and NOT have the page jump back to top. All this while pushing the body over.

You can make the off-canvas tab-bar stay "fixed" to the top.

If you don't need the off-canvas to push the body over and instead overlay - this will work http://codepen.io/obaez/pen/OPWNJb

If you do want it to still push, you can use this workaround. The body is scrollable -
http://codepen.io/rafibomb/pen/hApKk

This is something we're solving for in Foundation for Sites 6 (because we can make breaking changes).

Nathan Snyder about 4 years ago

Cool, thank you so much! I'm not sure which version I need since I'm not completely familiar with what's going on in Foundation yet, but I'll check out both. Thanks again!