Make footer stick to the bottom

Support
#1

Hi guys. How do I make the footer stick to the bottom of viewport while maintaining the height of the navbar when content of page does not take up the full height of a page / viewport. Thanks.

#2

Hi,

To achieve that, you can add this in PRO > Launch > Theme Options > CSS

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

vh - Relative to 1% of the height of the viewport*
158 - header height + footer height

For more information kindly refer to the link below.

https://www.w3schools.com/cssref/css_units.asp
https://www.w3schools.com/cssref/func_calc.asp

Hope that helps

#3

Thanks guys. Unfortunately, that didn’t do it. Take a look at this page, for example: http://nblund.com/client-login/. Other suggestions?

#4

Hey @nblund,

Hope you are doing great :slight_smile:
Please give a try to following CSS, Add CSS to global CSS section in theme options.

 footer.x-colophon {
     position: fixed;
     width: 100%;
     bottom: 0;
}

Let us know how it goes.

Regards

#5

Works just fine. Thank you.

#6

You’re welcome!
Thanks for letting us know that it has worked for you.