Floating footer


#1

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


#2

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


#3

Hi Dan - www.ldf.co.uk/flipside-corporation-tax-thanks


#4

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


#5

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

Thanks


#6

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


#7

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


#8

Hello Cush,

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

Thanks


#9

Thanks Dan - much appreciated.


#10

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


#11

Hello Cush,

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

Thanks


#12

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?


#13

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


#14

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


#15

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


#16

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


#17

Hello Cush,
Was that helpful ?

Thanks


#18

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


#19

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