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

Question Sticky Footer

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.
 
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.
 
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
 
sms-design

sms-design

Member
Did you make your footer via the Theme Builder and apply site wide
 
C

charlie coverdale

New Member
Yes

.... seven word minimum on posts
 
Last edited:
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
 
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/
 
Last edited:
sms-design

sms-design

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

charlie coverdale

New Member
Thank you very much! I appreciate the help !
 
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...
 
sms-design

sms-design

Member
you are going to need more than just one line to fill the space
 
C

charlie coverdale

New Member
Sure but shouldnt the footer stick to the bottom?
 
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%;
}
 
C

charlie coverdale

New Member
Legendary ... thanks again for all your help !!!
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top