Elementor Sticky Header Tutorial

Learn how to create your own Elementor Sticky Headers in this easy to follow tutorial.

Elementor Pro 2.0 has made creating your own Sticky Headers and sticky navigation an absolute breeze, but unless you know where the options are you can easily miss out.

In this tutorial, I'll show you step-by-step how to create your very own Sticky Headers in Elementor Pro.

Free tutorials for WordPress, Slider Revolution and Visual Composer. New tutorials added every Wednesday.

Take your Wordpress website and skills to the next level!

AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

SUBSCRIBE

LETS CONNECT:

-~-~~-~~~-~~-~-
Speed Up Your Wordpress Website in 30 Seconds or Less!!
-~-~~-~~~-~~-~-

[baytech]

Incredibly helpful. Thanks for posting.

[hamms]

Excellent editorial of Elemento Pro and using sticky header

[connor]

Mine is automatically translucent. What if I don't way it that way? I just want my header to follow as scroll down and I don't want stuff to be in the background of the header

[stevecooper]

Good video nice a quick straight to the point

[justforwebsites]

My heading doesn't apply where is the problem. & how can i fix this issue ?

[EnmanuelDiaz]

worked perfectly for me using Astra, which normally requires a pro version to use sticky headers

[KatyRobertsVideos]

Can you tell me how to make 2 sections sticky, I have a 2 section header but despite making both sticky only one remains on the top of the page?

[TheHitechonline]

Once again good tutorial dude.. keep it up..!

[scrnall]

@WPTuts, thank you greatly for all your vids. But I must ask you, what are those monster speakers you have? Are they monitor speakers connected to a whatever-it's-called- to then to your
your sound card?

[graphicartdude]

I'm using a costruction theme from OceanWP and having issues with my logo showing very small using Elementor; despite me uploading a larger logo size, uploading a double size retina image, and playing around with all of the min / max settings. I've spent hours trying to figure this out. Any idea as to why? I'm not wanting to use the logo widget where the logo sits at the top. I'm instead using the logo settings under "Customize > Header > Logo" which allows the logo to sit to the left of the menu. The odd thing is the logo shows proper size in the editor page, but when I publish it shows small again. Very confusing. Any help would be greatly appreciated.

[Serzill]

For those who came to see the solution (ADVANCE/PRO) user.. you will find it here 6:33

[matpo]

Hi, thanks. When I set this, it continues scrolling slowly by itself. Any work around for that?

[dieguitoo]

hi! thank you for the video but i have a question... i dont have the "scrolling effect" section. how can i do then? thank you very much!

[autoauto]

I have created header the same way. I can't see in advance tab option STICKY, sticky option available in other sections but not in my header templete any idea, ?

[gargameo]

Can this be applied only to one column, not for whole section?

[EPHONIC]

Nice video. I want to know why my pages all show Content and the footer on them when using Ocean WP. I can see it on your My Header 2018 as well. How do I turn that all off on my wite?

[ScissorVixens]

Hi...thank you for the tutorial!

I have one issue I can't seem to resolve with the sticky feature. I am using Elementor Pro and using the sticky feature for my header. I have 3 columns inside of the header section with one widget inside of each column.

I want all 3 widgets to remain sticky so I have set the entire section (containing the 3 columns and 3 elements) to be sticky.

It works as it should when scrolling the page vertically BUT, and here's the issue I can't seem to resolve. If a user engages the 'sticky' mode by vertically scrolling and decides to resize the browser horizontally (which is common with people with multiple browser windows open trying to fit everything on their screen)...the sticky header will NOT resize horizontally.

Now you might say...."Of course not, that's what sticky means...it won't move.".

But, I have seen websites with a sticky header that will resize horizontally whether or not sticky mode is engaged as a result of vertical scrolling.

Is this a 'bug' with the Elementor sticky feature or something we have to live with as a compromise of using this feature?

Any help would be greatly appreciated!

Drew
Las Vegas, NV

[VllKlNG]

I also have the latest Pro version installed (Version 2.0.3), but I don't see any Scrolling Effect under the sections advanced tab. Is this an OceanWP theme specific feature? I'm using Kleo themes at the moment.

[camilobarbosa]

ask, I use oceanwp and this option does not work with elementor, any idea what it could be?

[mcleedsas]

Nice tutorial. But last and most important step isn't available for me. There's no "Sliding Effect" in Advanced Tab... I've got the last update of Elementor Pro 2.
Do I need to enable this somewhere ? Thanks :)