Keeping the footer at the bottom of page

Hi there,

i did set up a popup layer slider in some of my pages. Now i have the problem that if i close the slider the dropdown menu from the header is being cot of because the side is empty when the layer slider has been closed. please see the attached screen shots.
My idea is to keep the footer at the vey end of the page so that the dropdown menu will be visible in full length.

Do have an idea how to realize this at the most easy way?

Thank you!

Bernhard

Hello There,

Thanks for writing in! The footer location is dependent on the height of the content area. This is why when you have a content with a smaller height, the footer displays right after the content just like in your screenshot. If you want to have the footer to always at the bottom of the page no matter how high the content area is, you can make use of a custom css. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

This code will set a minimum height for the content area so that the footer will always be at the bottom. The computation for the minimum height is the actual browser height minus the height of your navbar.

Feel free to change the 320px to a smaller or larger number, what ever is necessary.

Please let us know how it goes.

Hello there,

This helps! Thank you very much!
The only thing now is that there appears a border at the bottom end of the content. And with the console or inspector i can´t locate this padding or margin anywhere.

Thanks for your support!

Hi There,

Please provide your URL so we can take a closer look.

Thank you

Hi there,

a page where you can see what i mean is here: https://schmidt-photo.com/experimental/

Thank you for caring!

Hi there,

Please try to add this code in the custom CSS:

.entry-wrap {
    box-shadow: none;
}

Hope this helps.

Yes, it helped!

Thanks again for your great support!!

Bernhard

You’re welcome, Bernhard. :slight_smile: