APIs & Integrations

Cush
Participant

Floating footer

I have a template where the footer is not anchoring to the bottom of the page. Any ideas!!?

0 Upvotes
19 Replies 19
Cush
Participant

Floating footer

Hi Dan

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!

Regards

Ian

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,

We got on hubspot forms with custom validation too, I hope this might also be intresting for you :slight_smile:

Hubspot COS, forms with custom validation

0 Upvotes
Cush
Participant

Floating footer

Hi Dan

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

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,

Thanks for clarification, we just reviewed the links.
link1 :https://www.ldf.co.uk/flipside-business-finance
Link2 : https://www.ldf.co.uk/flipside-business-finance-thanks

Both of them are having two issue.

  1. header jumping (both)
  2. 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.

  1. you need to add class at template level, adding a unique class say ‘mincontent’, to page head.
  2. using this class you can modify footer position
    add this style to your page with min content.

.minconent .custom_footer-bottom{
position:absolute;
bottom:0;

}

Please remove minheight on div with class : page-center

If you further need help just let us know.

Thanks

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,
Was that helpful ?

Thanks

0 Upvotes
shraddha_03
Member | Partner
Member | Partner

Floating footer

No its not working. It gets fixed in Desktop but still hangs in mobile

0 Upvotes
Cush
Participant

Floating 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?

0 Upvotes
dan_hmonks
Member

Floating footer

Please click on FIXED Footer Demo text, its a linked to demo page.

or click on below link:

Fixed Footer Demo

sorry for confusion caused, let me know if it was helpful

Thanks

0 Upvotes
dan_hmonks
Member

Floating footer

How to add class to footer global group:

  1. find global module

  2. 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

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,

I will update you, with a demo in couple of hours.

Thanks

0 Upvotes
Cush
Participant

Floating footer

Thanks Dan - much appreciated.

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,
Please add below style to your css file.
.span12.widget-span.widget-type-global_group.fixed-footer {
position: fixed;
bottom: 0;
width: 100%;
}

And add class name to footer globe group.

Mean while I will be ready with demo

Thanks

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,

I have created demo for you, please click on demo link.
Demo link : Fixed footer

Thanks

0 Upvotes
Cush
Participant

Floating footer

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

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush, Is it something like fixed footer that you are seeking ?

Thanks

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,
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.
Thanks

0 Upvotes
Cush
Participant

Floating footer

Hi Dan - I don’t want it to float, I want it fixed. Thanks

0 Upvotes
dan_hmonks
Member

Floating footer

Hello Cush,

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.

Thanks

0 Upvotes
Cush
Participant

Floating footer

0 Upvotes