I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.

As this seems to be a common issue, I solved the problem by adding the following code:

div.footer-width-fixer {
    position: fixed;
    bottom: 0;
}

Now, the footer sticks to the bottom of the page, however, there 2 other problems:

1. The footer overlaps with the content in the bottom of the page (see attached image)

2. The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.

Any ideas how to solve this? Thank you!

Best Regards,

Maurice ( :

overlapping-footer

CodePudding user response：

Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.

You could try to add either

padding-top: {desired pixel amount}px;

or

margin-top: {desired pixel amount}px;

to the footer and see if that does the trick.

As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!

CodePudding user response：

I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!