Docs

[c1s]

Hi,

I am trying to get a sticky “parallax” footer with css, but was only able to achieve it partly. My code so far is:

page-id-1754 .x-colophon.bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: -1;
}

.page-id-1754 .x-main.full {
  position: relative;
  width: 100%;
  z-index: 0;
}

The problem is, that the content does not scroll on top of the footer.
I have tried to modify margin-bottom and min-height, but unfortunately without success.
Naturally, I am trying to avoid fixed heights.

Could you help me please??

Thanks a lot in advance

[c1s]

This reply has been marked as private.

[Christopher]

Hi there,

Parallax doesn’t work on footer it requires custom development which would be outside the scope of our support.

Currently footer doesn’t show up on that specific page, you need to update your code to :

.page-id-1754 .x-colophon.bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
}

Hope it helps.

[Author]

Posts