Fixed Bottom Bar (mobile footer)

Foundation already includes the ability to have a fixed top nav bar by just wrapping it in a <div class="fixed"> element.

However, Foundation doesn't include the ability to use nav bars as footers, or to have them fixed to the bottom of the screen; a common scenario for mobile web apps.


To make a bottom bar, create a standard Foundation top-bar at the bottom of the page, and add the bottom-bar class to it.

Yes, it's a little awkward to have <nav class="top-bar bottom-bar">, but just go with it for now.

To make it fixed to the bottom of the window, wrap it in <div class="fixed-bottom">.

In order to demonstrate fixed bottom bar on this page, we need this page to be taller than your screen height, so that you can scroll the page. Here's a tall picture of a kitten.

Note that fixed toolbars can be a bit complicated on some older mobile browsers, due to their lack of support for the position: fixed and known issues with scrolling. See jQuery Mobile's notes about mobile browser support for fixed toolbars.