By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official
C

charlie coverdale

New Member
I am trying to make a footer that on a short page is at the bottom of the page but on longer pages it is at the bottom of the page content.

See this for a better explanation.

freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
1578918995397.png


The closest i have come is by following this ...

iheartelementor.com/how-to-create-a-sticky-footer-that-reveals-on-scroll/
Add this as your class: sticky_footer
custom footer
go the Scrolling Effects Options and choose to have a sticky section on the bottom.
Add this CSS to that section.
.sticky_footer{
z-index: -1!important;
}


I'm sure there is something obvious i am missing .... any help would be amazing.
 
elementor official
sms-design

sms-design

Member
Some more information about version of
  • wordpress
  • elementor free/pro
  • widget
  • theme
  • Web browser
  • OS mac/pc/linux
Screenshot or site url may help people answer your questions.
 
elementor official
C

charlie coverdale

New Member
So the site is iocane.co.uk
Wordpress version is 5.3.2–en_GB
Elementor Pro
Theme is Hello
One of the included Footer templates from Elementor theme builder
I am using Chrome and Firefox
Webserver is IIS on 2016
Admin from Windows 10


A page with no content on it, the footer is jammed up under the header

1578928058492.png


A page with content, the footer should be at the bottom of the content irrespective of the content length, but no higher than at the bottom of the visible page.

1578928113322.png
 
elementor official
sms-design

sms-design

Member
Did you make your footer via the Theme Builder and apply site wide
 
elementor official
sms-design

sms-design

Member
try giving your footer a css class (under advanced tab) iocane-footer

then in the custom css section add
.iocane-footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

But test this solution across mobile you also have a z-index set of -1 on the footer I would remove that
 
elementor official
C

charlie coverdale

New Member
So I tried following the youtube link you sent, the footer only works on some pages...
The footer works as expected on these pages...
https iocane.co.uk/privacy
https iocane.co.uk/cookies
But it does not work on others...
https iocane.co.uk/
 
elementor official
Last edited:
sms-design

sms-design

Member
That's because those pages mentioned have content.
 
elementor official
C

charlie coverdale

New Member
Hmm so i put some content onto the front page but the footer still isnt sticking to the bottom of the page...
 
elementor official
sms-design

sms-design

Member
you are going to need more than just one line to fill the space
 
elementor official
sms-design

sms-design

Member
as above add this css
then in the custom css section add
.iocane-footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
 
elementor official
elementor official
Top