I have a template where the footer is not anchoring to the bottom of the page. Any ideas!!?
Interesting Issue, I will like to understand more about it, can you please share url for same.
I hopfully we can provide some way out for you.
Can you please help me with a reference link , where you have seen floating footer used, will help you to implement same on this one too.
Hello Cush, Is it something like fixed footer that you are seeking ?
Sounds about right. Just when you zoom out the page you’ll see the footer float up the page rather than sticking to the bottom
Hi Dan - I don’t want it to float, I want it fixed. Thanks
I will update you, with a demo in couple of hours.
Thanks Dan - much appreciated.
Please add below style to your css file.
And add class name to footer globe group.
Mean while I will be ready with demo
I have created demo for you, please click on demo link.
Demo link : Fixed footer
Thanks for the demo. I have tried adding the css, but am struggling to apply it to the global template. Also when I look at your demo is the white section supposed to be the footer as on my screen it is up near the top of the page?
Please click on FIXED Footer Demo text, its a linked to demo page.
or click on below link:
sorry for confusion caused, let me know if it was helpful
How to add class to footer global group:
find global module
click on gear icon, once you see dropdown click on edit css
Move to Custom CSS Class section add class name : fixed-footer
and you are done
Thanks for this, however I think I may have mislead you. The issue I have isn’t that I want the footer to appear at all times with the upper page scrolling, it is just that I want to ensure the footer stays at the bottom of the page as a footer. So when the visitor scrolls to the bottom of the page the footer appears and doesn’t float up the page if they zoom out or on a larger resolution.
The weird thing is that we are using the same footer on a different page and it remains at the bottom of the page - www.ldf.co.uk/flipside-business-finance but floats on www.ldf.co.uk/flipside-business-finance-thanks
Thanks for clarification, we just reviewed the links.
Link2 : https://www.ldf.co.uk/flipside-business-finance-thanks
Both of them are having two issue.
- header jumping (both)
- footer jumping (only one) ie on https://www.ldf.co.uk/flipside-business-finance-thanks
Cause of header jumping :
We have found you were trying to make header sticky, on body scroll you have a class named “sticky-header” adding to body tag, just set padding to 0 in this class, and issue will be fixed for header jumping
I am not sure if you were trying to achieve a fixed header, because we don’t see that is happening. if you need any help in achieving fixed header please let us know.
on https://www.ldf.co.uk/flipside-business-finance-thanks, you don’t have content
2. Footer Jumping :
https://www.ldf.co.uk/flipside-business-finance-thanks, the issue for footer jumping is due to lack of content on page,
you have added min-height, which will not be compatiable with all resolutions, as on larger devices you will notice gap with footer.
Best solution : as this footer is global.
- you need to add class at template level, adding a unique class say ‘mincontent’, to page head.
- using this class you can modify footer position
add this style to your page with min content.
Please remove minheight on div with class : page-center
If you further need help just let us know.
Was that helpful ?
I’ve passed it over to our web developer. I’ll catch up with her in the morning and let you know ASAP.
Thanks for all your help so far!