Create Sticky Sections In Elementor Pro

Learn how to hide sections in Elementor Pro and let them appear when the visitor scrolls through your website. Really handy for headers or call to actions on the top of your page.

We will make use of CSS codes in order to get the final result. First, we will create a second header in Elementor Pro, optimize it for all devices, and then make it sticky. After that, we will give the section a CCS class so we can give the section CSS styles when it scrolls.

We will copy a CSS code that will hide the header when the visitor is not scrolling and show it when the visitor starts to scroll. We will also add an animation in the CSS code to give it a nice transition when it appears.

Overview with timestamps:

00:00 Intro
01:17 Unassign the current Header
02:10 Create a new Header Template in Elementor Pro
02:43 Create the scroll header
04:40 Make the header sticky
05:10 Add display conditions
06:39 Create some structure with the Elementor Navigator
07:02 Make the second header disappear
09:09 Use negative margin in Elementor Pro
10:14 Use The Effect Offset
11:58 Create a Sticky Section Halfway A Page

• #howto_style
• #ferdy_korpershoek
• #wordpress