5/5

How To Create A Sticky Footer That Reveals On Scroll

In this tutorial we will be building a footer that is stuck the the bottom of the page but reveals it self as your scroll up.

Here is what the effect should look like when we are done.

My staging environment

Theme: Hello Theme

Elementor Version: Pro ( required to build your custom footer )

Let’s begin.

Build your footer as you like just remember that your footer widgets need to all in one section or this effect will not work as it should. You can as many inner sections as you like. After you have completed your footer we need add some additional css to make it possible to click any links in your footer.

Before you save your custom footer go the Scrolling Effects Options and choose to have a sticky section on the bottom.

The CSS

Add this css in the advanced area or in the css area of the customizer.

.elementor-sticky.elementor-sticky--active.elementor-section--handles-inside.elementor-sticky--effects {
z-index: -1!important;
}

.elementor-sticky {
z-index: 1!important;
}

The above css will change the z-index of the footer based on the position of the content. When the footer is fully revealed the z-index will change to make if possible to click the links.

Just be sure that your section have solid background or your footer will show.

Congratulations you have just added a fixed footer to your site that will reveal on scroll.

Additional Notes

The most important thing to remember is that every section on your site needs to have a background color or image or you will be able to see the footer through the widgets.

Enjoy 😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function. For this to work you don’t need any kind of…

Sticky Video On Scroll

Greetings All. You may have seen this effect on some other sites and wonder if it was even possible with Elementor. Well the answer is yes and very easy I might add. With no additional javascript needed just some crafted…

6 Comments

  • Everything works fine, except if there is less content and no scroll bar on the right, footer is under invisible scroll bar so there just appears white space on footer instead of scroll bar on the right.

    Reply
    • Allow me to revisit this tutorial and see if changes need to be made.

  • thx for this tutorial! i have some issues with this.
    it all works fine, but i can´t click any links in the footer.

    have you some ideas?

    Reply
    • Post updated please read the entire post and make the required changes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?