Menu icon Foundation
Bottom fixed top-bar?

Screen shot 2014 03 12 at 2.22.44 pm

I would like to have a bottom fixed navigation using the top-bar fixed functionality. I would like the bottom nav to always remain in the screen while the user scrolls through a long page.

I really like the way that the fixed top-bar behaves, but is it possible to fix this to the bottom of the screen? When I add the fixed and bottom-bar classes with fixed, it makes the navbar semi-transparent and it goes behind other elements.

Is there a simple way to do this? What is this behaviour called?

Thanks very much!

Screen shot 2014 03 12 at 2.32.04 pm

fixedtopbarbottom

Screen shot 2014 03 12 at 2.22.44 pm

I would like to have a bottom fixed navigation using the top-bar fixed functionality. I would like the bottom nav to always remain in the screen while the user scrolls through a long page.

I really like the way that the fixed top-bar behaves, but is it possible to fix this to the bottom of the screen? When I add the fixed and bottom-bar classes with fixed, it makes the navbar semi-transparent and it goes behind other elements.

Is there a simple way to do this? What is this behaviour called?

Thanks very much!

Screen shot 2014 03 12 at 2.32.04 pm
Tristan Schaaf over 5 years ago

So you want the red bar to function as a fixed footer or as a sticky footer (there is a difference).

For a fixed footer, always at the bottom of the screen, it's a lot easier.

Add this to your CSS

footer{
margin-bottom: 0;
bottom: 0;
position: fixed;
width: 100%;
height: 50px;
}

body{
margin-bottom: 50px;
}

Of course the height and width can be adjusted. the height of the footer and the amount for margin-bottom have to be the same.

For a sticky footer i haven't really tried that out yet, but it's probably something similar but with added JS

Nina Wei over 5 years ago

How to make a sticky footer? The bar is at the bottom at first, and when stroll to the top, it is fixed. Thanks!