Fixed footer

Does it not do that already if you remove your CSS?

Have a look at this footer example: https://revolution.fuelthemes.net/revolution-classic/

Hidden, then revealed but static.

They’ve also got some padding on the body element that you may not have seen. The padding is set to the height of the footer using JavaScript. In their case at desktop, the height is 502px.

Thx Andrew (I’ve found 503…?).

But does that explain why the footer is covered by the featured image since I can control the footer height with:

.site-footer {
   height:350px;

Also, when testing:

.page {
	padding-bottom:500px
}

The page (as set by now) only scrolls further up but the footer is still visible when scrolling the page.

• This reply was modified 5 years, 10 months ago by Brogaard.

I think you’ve achieved what they have, but they just have a bunch of layers on top of the footer. Layers that have opaque background colours, so you never get to see the footer until you get past those layers. Twenty Seventeen doesn’t have background colours on all of the sections of content.

1) Sort out the layering using relative positioning with z-index
2) Add background colours to those layers

I.e.:

.site-content {
    background: white;
    position: relative;
    z-index: 1;
}

Hi Andrew, finally made it by using your code plus changed .page to body.page – otherwise far to much white space. That’s the whole syntax to make a static footer:

.site-footer {
  display: block;
	position: fixed;
	left:0px;
  bottom:0px;
  height:450px;
  width:100%;
	background:#999;
}

body.page {
	padding-bottom:450px;
}

.site-content {
	background: white;
	position: relative;
	z-index: 1;
}

Very useful for the future.

Thanks for your help! Wish you lots of Karma and a beer in Copenhagen ??

• This reply was modified 5 years, 10 months ago by Brogaard.