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

[@susangemayel-tapper3794]

I'm really loving your tutorials, you are not doing the usual stuff that others are doing, you are doing unique tutorials that really make designs more unique & modern! Thank you!

[@ferdykorpershoek]

Thank you Susan, that means a lot to me 😊

[@m0orash]

Your sound and video quality are some of the best on TH-cam so far

[@jackies35]

YESSSS! Thanks Ferdy! I clicked all of your links. Thank you for bringing all this good stuff to us.

[@ferdykorpershoek]

Thank you 😊

[@aashishsharma11]

I wasted too much time on other tutorials. but by yours i got it in first time...

[@toyzoo6436]

thx, exactly what i was looking for,

[@StudySessionYT]

Hi Ferdy, love all your tutorials! Could we see some videos about website optimization in the future?

[@bySterling]

So awesome!

[@rezatangestani2742]

I need to say I owe my website to you.
Thank you.

[@HalassKitchen]

Excellent

[@tanvirchowdhury2315]

you are the superman of elementor

[@volga2544]

Ferdy, many thanks for the great video. Been watching and quite interested in what you do )))

[@yuriykabanets7665]

Cool!

[@leomark5732]

Hi Fred, thanks for dong video as always a great one. I was wonder how to apply this to a side section of elementor page so as to make example a left side section of page to be sticky as you scroll.

[@BrunoSouza]

Great! Can't you make it disappear more smoothly?
Thanks!

[@alfonskannegieter1253]

Good morning, i just started with WordPress and i already love it.
Your video's are helling me a lot.
Especially, the one in Dutch language. 😀
But something isn't clear to me.
I am working with the Astra them pro.
My headers are also from Astra.
Can i still use these features from Elementor or must i delete or make the header from Astra invisable?
Thank you!

[@marknasri1201]

thanks

[@salimbelhamel_official]

So loving tutorials !! Just a question .. please do you know why I do not find the button STICKY in elementor when I click on ADVANCED ? I have elementor Pro version .. thanks and keep going !! your tutorials are so amazing

[@SaffySioux]

That's really helpful, but how can I make TWO sections be sticky? For example I have the company name LARGE in a text section, underneath that I have a the menu and company phone number. I want ALL of that to be sticky. But it seems I can only do 1 section at a time. Help? Please!!

[@jackies35]

Question - Is it wise to have social media on top to compete with the message and other menu choices? Would you put the social media at the bottom of the page?

[@ferdykorpershoek]

I would put it at the top.

[@dilkashaikh]

Plz use program on VS Editor

[@mujammilpinjara1537]

❤️❤️

[@OmenkaUlonka]

Great Tutorial Ferdy! but say, Did you just say "Ceaser's Class" 4:49😁

[@ferdykorpershoek]

CSS class 😁

[@dezinur]

Hi bro how are you, im still worried about my websites , stay blessed always

[@aashishsharma11]

i want you to help me out in Video Slider(Hero Section). I am having .MOV video of 100+mb not looped video, how i can use that video in Slider where the video plays in background and slider of the text comes in one by one.

[@ferdykorpershoek]

Create multiple slides and put a rotation timer in it. Also make the videos less then 100MB.

[@aashishsharma11]

@@ferdykorpershoek ok.. I will.. Previously when I tried.. I uploaded video from cPanel but it doesn't show in media files.. May be I need it MP4

[@justsnappy5534]

Bro without elementor pro stick header
Only element for sticky header on oceanwp theme.

[@ferdykorpershoek]

Yes 😊

[@justsnappy5534]

@@ferdykorpershoek thanks so much.

[@Ciyakhan]

I am the first who likes😉

[@asifloading3042]

how to do it with free elementor ??

[@KodiLearn]

you can try with custom css or php

[@mtayyabrehman6964]

1st viewer