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.