How to make sticky footer?

[ddctc]

Hi I tried adding the code at the bottom of this thread: https://theme.co/apex/forums/topic/how-to-achieve-fixed-footer/ but it didn’t work.

Can you help me out? Thanks!

[XSupport]

Hi there,

Please add this CSS code below.

.x-colophon {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

Hope this helps.

Thanks.

[ddctc]

Hi sorry maybe the word “sticky” wasn’t the right word. I don’t want the footer over top of content if the content is long.

I meant if the page is too short the footer would actually stay at the bottom of the page, instead of hovering above like this (see secure note).

Thanks!

[XSupport]

Hi there,

Please add the following CSS code:

.x-main.full {
    min-height: calc(100vh - 290px);
}

Hope this helps you.

Please let us know how it goes.

Best regards.