Hi -

How would one go about creating a css sticky footer menu as seen on MOMA's website? I understand this is not great for usability, but it seems like it would work well on a simple website.

3 answers

danwellman 5600
4
points

MOMA as in the Museam of modern Art?

Essentially they have a fixed div positioned at the bottom of the screen, something as simple as:

#footer { 
  position:fixed;
  width:100%;
  bottom:0;
 z-index:100;
}

Should do it :)

Answered about 7 years ago by danwellman
  • You also want to be sure that you add enough padding/margin to the bottom of the main content area so that it doesn't get hidden behind the footer div. Vernon Kesner about 7 years ago
  • also think about browsers like Chrome which now covers the bottom with the hyperlink and other information. Discorax about 7 years ago
1
point

There's this:

http://www.cssstickyfooter.com/

which you might enjoy.

Answered about 7 years ago by Tony Crockford
0
points

Then just place whatever menu items and its styling you want within the div.

Answered about 7 years ago by David Mermelstein
  • exactly :D danwellman about 7 years ago
  • but if you want more info on sticky footers, see http://ryanfait.com/sticky-footer/ which is the technique recommended by http://css-tricks.com/ danwellman about 7 years ago