Build your WordPress website from a clean slate with Elementor Pro and the Hello theme! Learn how to create your own transparent and sticky headers with ease!
Good tips. Did you do the Nav Menu on Wordpress or Themebuilder? I noticed that when I use Themebuilder, there's a duplication of the menu that happens and I cannot get rid of the Wordpress menu. Which means I cannot use Themebuilder as it will only duplicate the menu. How can I solve this?
This worked like a charm! Thank you so much, been fooling around the settings of Elementor for some hours now trying to figure it out. Only wish I found your video first :) Haha.
Never know why I just don't visit WPTuts first. Always looking around for solutions, and always comes up trumps here. Will always be my first port of call from now on. Many thanks for the tutorials. Such valuable info and helping make my business a big success!!!
Sir, your video is brilliant. You have literally solved every single one of the questions/problems. Honestly dude, thank you SO MUCH. I hav Elementor Pro but what you have done is shown me TONS more of what it is capable of. You have been added to my list of "How do get stuff done without the nonsense" videos. Liked and subed and I will be telling people about this BRILLIANT video. Thank you so much.
@WPTuts, Paul I was searching for something else but came across this video. Although it isn now almost 2 years old, it gave me some ideas to improve my clients headers. Thanks!
As always, your tutorials are arguably the best Elementor tutorials on the Internet. You explain everything with such clarity that after a quick watch through, I can easily recreate what you did and customize my own. I am super pumped to see you making tutorials for Crocoblock as well. I love their suite of plugins and their support. To have you making their videos as well is truly a perfect fit, and was an incredibly judicious choice on their part.
By far the most helpful tutorial on sticky headers; you answered exactly what I needed without over complicating or wasting my time. Thanks from a small business owner!! =D
I watched 4 different tutorials on Elementor Pro Headers today. You nailed this video. Exactly what I needed. I just subscribed. Thanks for the tutorial.
Excellent tutorial, I was looking for a good lesson on creating a header and footer. Your step-by-step approach worked perfectly and I was able to create a header in under an hour. Thanks again for taking the time and energy to do this.
I love your videos, they've been so helpful in my web development. When I see you in the search results, I always go to you (and I rarely have favorites). Keep up the great work!
Thank you for such clear directions. I am a newbie and can't follow the actual Elementor tutorials, they are way too fast. So thanks again, much appreciated!
Excellent tutorial. One of the best I've seen. One quirky thing I noticed - I had included some text in my header along with the nav bar, but only the nav bar remained semi-transparent. However, after I installed the Sticky Header Effects plugin everything worked as expected. I hope it still works when I upgrade from Elementor Pro 3.8.2
Another quirky thing - using Elementor Pro 3.8.2, I added a menu option to the transparent header and now, Template -->Theme Builder --> Edit header does not recognize the Sticky Header Effects plugin effect. But if I edit the home page it looks back to the way I had it with the sticky plugin. Not sure how to fix that.
Hi Mate, Thank you ever so much for sooo many useful videos. I've been learning and selling Elementor based websites for quite a while now thanks to your excellent tutorials, so cheers for that. Just wanted to give you a heads up on this plugin - I know that the intent is for this to be used by users with no programming experience, however the plugin is jittery - it flickers even with high precision configs (exact pixels, using inspector etc etc) and can be so frustrating to test out. The alternative that Elementor actually have on their website for shrinking and alternative manual methods include only 20 lines of CSS which can be implemented within the elementor container and are more clean and you get a 1 step animation, rather than a 2 step (menu shrinks then logo shrinks - disturbing to the fluidity of animations and all). Furthermore, you can control the animation speed. Anyway - I hope you found this useful and thank you again for being a mentor to us aspiring web developers. Cheers!
Thanks it was very helpful but i have a little problem when i scroll back to top my header does not show it only happens when i enable the shrink option otherwise its normal plz help.
This is amazing. The only part I don't understand is how it worked when you set a negative margin. When I did that, my header disappeared. However, I used the same idea and applied it to the content underneath the header, which pulled that content up. So, this still got me the result I really needed!
How would you then set a background image to be the whole background of the page that even goes up over the section where the header is? Example, if I want a nice night sky background how do I get that, in Hello Theme, to be the background of the entire page and the pages just float over the background so the background does not really move? do you have a tutorial on how to do that?
At around 6:12 you set the top margin of your header to -95px. If I replicate that, it pushes my menu header out of sight at the top. However, if I set the bottom margin to -95px and increase the z-index, then I achieve what you are showing. Maybe this changed with recent Elementor updates?
All are explained well but I have a problem with doing this when I post an article the article was also pushed towards the header. Please, tell us their solution there is no single tutorial for that on youtube. Eagerly waiting for your reply?
Loved the tutorial and got it to work...mostly. My problem now is that when I want to work on pages in Elementor, a "EDIT HEADER" box drops down any time I try manipulate the first (top) section on any given page. Any ideas for a workaround or did I miss something?
Awesome video. I have a two row header and only the lower row is sticky. Do you think it would make sense to apply the negative margin to the body templates?
Hello Paul I missing feature to this plugin is the ability to change the color of the logo while scrolling. Do you know if they plan to implement it? Thanks anyway for your clean & easy to follow tutorials.
Hello Sir, Your videos are awsome, easy to understand. This video made work so easy without using a piece of code. Please make videos on Piotnet if possible. With regards, Vivek Kumar
1. My heaader completely disappears when scrolling back right to the top. 2. Can you put a top bar over the top of this transparent header? Elementor has a video about the new header and footer says you can but when i go to add another row it doesn't work
Came acroos after almost a year. Great one! Thank You. Saved me in still in 2020 (the Free Plugin untested with Current Updates on Elementor & WP) tons of time & still not using any template rather than Hello theme... by Any Chance a few questions: -95% why not -100% to the top? and when i activated Shrink: By Scrolling back to top Whole header dissapears. is this the reason why you used - 95? and if I use -95% i see a Gap of 5% in White behind the Header Section. Any tips would be Great. Thanks. Bernie.
Thanks for the tutorial. I had some issues with the Elementor header, I think the problem was when resizing the browser, it wouldn't span the full width of the window, maybe you can check that yourself. Anyway, after your viewing tutorial, I will try again!
@@rocaivan In my case using a different theme (GeneratePress + Premium extension) gave me more options to style the header menu and it worked like a charm.
When using Sticky header effect plugin, the menu is not responsive when resizing the browser window. Please try to resize browser to check out. Any way around that?
The option to change the logos color on scrolling is amazing, but I can't seem to find an option to change the color of the text on scroll. Can someone help me with that?
Hi, I found very good the tutorial, but there's something that's missing for me. If I set the home page template to Elementor Canvas, the header doesn't show, any help?
Looks great. Will definitely use this to create different looks and colors for different times of the year. Also, has anyone else noticed an increase in speed after the latest WP update? After the update and install of the latest PHP version, my sites increased roughly 40% in load times. And that's all I did to the sites. Same Swift Performance cache plugin with a Bunny CDN. Lightning fast on Apache-Litespeed servers.
Great tutorial but now I can't edit any pages because the content section comes up in the "Edit Header" area and I can't turn off the the sticky part. Maybe I did something wrong, I am a newbie! The only thing I can think of is to reduce the top margin so it doesn't interfere with all my pages ability to edit. I really would like to have this but right now Im stuck waiting until I finish all my pages and then I fear I will not be able to turn it off sticky and be rebuilding my header in the future. Help please.
Yes this method is a simple solution for everyone who are not familiar with css! But what are the advantage of doing it with css instead of the plugin ?
Hi Paul, thanks for this tutorial. I seem to have a problem with this plugin... When activating the shrink effect the unshrunk menu disappears when scrolling back the top of the page. By unselecting the shrink effect, the unshrunk (original menu) reappears? Have tried various settings including the 'Z' index of the menu (thinking that the plugin was forcing the menu below page content). Having viewed the plugin details, it states that it hasn't been tested with my current version of elementor. I suppose this could be the problem? Note: I am using the Hello theme and no other plugins apart from Elementor and Elementor Pro...
@@WPTuts Thanks Paul. Did read the bit on the description and mention padding of the header section, which I reset. Will take off negative margin. If I do use the shrink effect I will try to adjust margin on pages section. Thanks again Paul, keep up the great work!
It worked pretty well, nice effect. The only thing is that the menu goes missing after scrolling back up *to the top*, which is weird. The menu is visible upon arriving at the site, the menu sticks, it shrinks. But if you scroll back up and it is not there anymore. Scroll a bit down and it is there again. I cached/purged and tried a new logo, no avail. Common problem?
@@mjd1971 I did. Although I don't remember exactly. Try checking the margins on your header in elementor and in wp>customize>header. For me, I believe it was something I did to the header while trying another method. You could always try to make another header template
Set the negative margin to the bottom, not top. Then it works. I have no idea how Paul got this to work by changing the top margin to -95. Thet will always result in the element leaving the view port.
Hey Paul, I have implemented this thank you very much for your insightful WPTuts. I am wondering if/how to only show the sticky header when scrolling back up the page as in howtogeek.com that uses this method of displaying the header only when required i.e. user starts scrolling back up the page to get to the menu.
I ve got problem. My page scrolls too high. When i scroll down and then maximally scroll up my Header disappears. Additionaly the background color is not invisible.....
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Build your WordPress website from a clean slate with Elementor Pro and the Hello theme! Learn how to create your own transparent and sticky headers with ease!
hii sir,how to import that template to page
Hi!
How to add Bottom Shadow in Sticky Header after scrolling?
Good tips. Did you do the Nav Menu on Wordpress or Themebuilder? I noticed that when I use Themebuilder, there's a duplication of the menu that happens and I cannot get rid of the Wordpress menu. Which means I cannot use Themebuilder as it will only duplicate the menu. How can I solve this?
This worked like a charm! Thank you so much, been fooling around the settings of Elementor for some hours now trying to figure it out. Only wish I found your video first :) Haha.
Thank you so much for the video! Its precious, not a single min was wasted on unimportant stuff! I learned a great deal!
Never know why I just don't visit WPTuts first. Always looking around for solutions, and always comes up trumps here. Will always be my first port of call from now on. Many thanks for the tutorials. Such valuable info and helping make my business a big success!!!
Sir, your video is brilliant. You have literally solved every single one of the questions/problems. Honestly dude, thank you SO MUCH. I hav Elementor Pro but what you have done is shown me TONS more of what it is capable of. You have been added to my list of "How do get stuff done without the nonsense" videos. Liked and subed and I will be telling people about this BRILLIANT video. Thank you so much.
Awesome to hear that the video has helped you out. :)
@WPTuts, Paul I was searching for something else but came across this video. Although it isn now almost 2 years old, it gave me some ideas to improve my clients headers. Thanks!
wowww thank you very much , I've tried many times to do that . finally !
Way to go! Only wished I came across your excellent tutorial before spending many wasted hours. Thanks!
As always, your tutorials are arguably the best Elementor tutorials on the Internet. You explain everything with such clarity that after a quick watch through, I can easily recreate what you did and customize my own. I am super pumped to see you making tutorials for Crocoblock as well. I love their suite of plugins and their support. To have you making their videos as well is truly a perfect fit, and was an incredibly judicious choice on their part.
Wow, thanks!
I'm super pleased I could get the collaboration with Crocoblock in place too. :0)
By far the most helpful tutorial on sticky headers; you answered exactly what I needed without over complicating or wasting my time. Thanks from a small business owner!! =D
Great to hear this helped answer your questions. :0)
I watched 4 different tutorials on Elementor Pro Headers today. You nailed this video. Exactly what I needed. I just subscribed. Thanks for the tutorial.
Thank you for the good and easy understanding tutorials
This was insanely helpful, thank you so much!
Excellent tutorial, I was looking for a good lesson on creating a header and footer. Your step-by-step approach worked perfectly and I was able to create a header in under an hour. Thanks again for taking the time and energy to do this.
I love your videos, they've been so helpful in my web development. When I see you in the search results, I always go to you (and I rarely have favorites). Keep up the great work!
That's awesome to hear. Thank you :0)
Excellent tutorial. Great pace of explaining (and not over explaining)!
The best tutor about sticky header using Elementor. Congrats and thanks!
thanks, you saved me from heart attacks for the same topic by other videos
Another brilliant and informative tutorial. Thanks Paul.
No problem Andy. :0)
Thank you for such clear directions. I am a newbie and can't follow the actual Elementor tutorials, they are way too fast. So thanks again, much appreciated!
I didn't know that! This is what I want! Thanks from Japan.
THANK YOU! I have been struggling for so long for something I thought was so simple lol
Thank you. To the point and very helpful
You did an excellent job, props to you mate.
Thank you John :)
Thank you, this is a really great option, and you explain it really well for the transparent sticky header.
Great tutorial as always Paul!
Why thank you Scott :0)
Thank you! This video is xactly what I needed.
really good. Thanks for doing this.
Excellent tutorial. One of the best I've seen. One quirky thing I noticed - I had included some text in my header along with the nav bar, but only the nav bar remained semi-transparent. However, after I installed the Sticky Header Effects plugin everything worked as expected. I hope it still works when I upgrade from Elementor Pro 3.8.2
Another quirky thing - using Elementor Pro 3.8.2, I added a menu option to the transparent header and now, Template -->Theme Builder --> Edit header does not recognize the Sticky Header Effects plugin effect. But if I edit the home page it looks back to the way I had it with the sticky plugin. Not sure how to fix that.
Thank you for the video! Can you make a tutorial on how to make that effect more flexible? such as the color of the text changes too...
As always a really good precise tutorial - wish you did more!
Thanks, great tutorial!
really helpfull, Thanks a lot from Indonesia
Excellent tutorial for newbies! You earned a new subscriber mate! BRAVO - Big Cheers :)
Thanks!! great explanation, simple and straight to the point
Thank you so much! This did helped me a lot!
Hey was wondering if you have ever done a custom split menu header? I did but its not applying the colors for the menu settings? Do you know why?
Thanks, man! Very useful. Before this I applied custom CSS to make my header transparent, however, this plugin does everything I want.
It certainly does. Sure, you can do it with your own CSS, etc., but not everyone wants to or is comfortable doing it manually. :0)
@@WPTuts Exactly. This has saved me so much time.
Would you be able to share how to do this using CSS? I'm using this plugin but finding a free problems with it. Thanks
You're genius, this helped me a lot. Thanks again.
GRACIAS!!! ME ESTABA VOLVIENDO LOCO!!!
Hi Mate,
Thank you ever so much for sooo many useful videos. I've been learning and selling Elementor based websites for quite a while now thanks to your excellent tutorials, so cheers for that.
Just wanted to give you a heads up on this plugin - I know that the intent is for this to be used by users with no programming experience, however the plugin is jittery - it flickers even with high precision configs (exact pixels, using inspector etc etc) and can be so frustrating to test out. The alternative that Elementor actually have on their website for shrinking and alternative manual methods include only 20 lines of CSS which can be implemented within the elementor container and are more clean and you get a 1 step animation, rather than a 2 step (menu shrinks then logo shrinks - disturbing to the fluidity of animations and all). Furthermore, you can control the animation speed.
Anyway - I hope you found this useful and thank you again for being a mentor to us aspiring web developers.
Cheers!
Any ideas how I get the menu to be on top of the content below it (using the negative margin) without selecting the "sticky option"?
Thanks it was very helpful but i have a little problem when i scroll back to top my header does not show it only happens when i enable the shrink option otherwise its normal plz help.
How do you offset the negative margin in the nav at the bottom of the page if your 1st section content is full height?
Thank you for a great tutorial!
Thanks this video helped me a lot for a new project))
Thank you and this is what exactly I looked for. Keep sharing
This is amazing. The only part I don't understand is how it worked when you set a negative margin. When I did that, my header disappeared. However, I used the same idea and applied it to the content underneath the header, which pulled that content up. So, this still got me the result I really needed!
Excellent video, thank you so much!
Great! what about different logo (color) for when sticky header?
How would you then set a background image to be the whole background of the page that even goes up over the section where the header is? Example, if I want a nice night sky background how do I get that, in Hello Theme, to be the background of the entire page and the pages just float over the background so the background does not really move? do you have a tutorial on how to do that?
At around 6:12 you set the top margin of your header to -95px. If I replicate that, it pushes my menu header out of sight at the top. However, if I set the bottom margin to -95px and increase the z-index, then I achieve what you are showing. Maybe this changed with recent Elementor updates?
All are explained well but I have a problem with doing this when I post an article the article was also pushed towards the header. Please, tell us their solution there is no single tutorial for that on youtube. Eagerly waiting for your reply?
Thanks. Helpfull video
Great video…taking things to the next level, but without the techie coding… thank you
Tks so much for the tips Wp Tuts!!!!
Thanks, this video help me a lot
Great video! Quick question: how do you make your sticky header NOT transparent at all, so the content of your page goes underneath it as you scroll?
Awesome thank you so much! Brilliant tutorial!
Great tut! Many THX!
Loved the tutorial and got it to work...mostly. My problem now is that when I want to work on pages in Elementor, a "EDIT HEADER" box drops down any time I try manipulate the first (top) section on any given page. Any ideas for a workaround or did I miss something?
Thanks a lot..you answered what I was looking for
One of the best tutorials for that!
Sweet, just what I needed today!!!
Thanks for the tutorial, how do you know how many pixels to make the negative margin?
Awesome video. I have a two row header and only the lower row is sticky. Do you think it would make sense to apply the negative margin to the body templates?
¡Genial, muuuuchhhhaaaaasss gracias por compartir! Funcionó perfecto 😊
Thank you! Keep up with the good work! I love your elementor tutorials, they are very helpful.
Hello Paul I missing feature to this plugin is the ability to change the color of the logo while scrolling. Do you know if they plan to implement it? Thanks anyway for your clean & easy to follow tutorials.
ua-cam.com/video/XZisV3Cgp34/v-deo.html
Hello Sir,
Your videos are awsome, easy to understand.
This video made work so easy without using a piece of code.
Please make videos on Piotnet if possible.
With regards,
Vivek Kumar
Thank you so much! Such a helpful video, just what I needed to know.
1. My heaader completely disappears when scrolling back right to the top. 2. Can you put a top bar over the top of this transparent header? Elementor has a video about the new header and footer says you can but when i go to add another row it doesn't work
same behavior when i try to use the Shrink effect for the stick header plugin....
thanks you so much!!!
That is lovely. May you prepare a tutorial on how to create a vertical sticky menu with elementor pro please..??
Thanking you know in advance
hey,how do you handle the margin effect swallowing the other woocommerce pages?
Thanks for the tutorial.
Came acroos after almost a year. Great one! Thank You. Saved me in still in 2020 (the Free Plugin untested with Current Updates on Elementor & WP) tons of time & still not using any template rather than Hello theme...
by Any Chance a few questions:
-95% why not -100% to the top?
and when i activated Shrink: By Scrolling back to top Whole header dissapears. is this the reason why you used - 95? and if I use -95% i see a Gap of 5% in White behind the Header Section.
Any tips would be Great.
Thanks. Bernie.
He used px, not %.
Thanks for the tutorial. I had some issues with the Elementor header, I think the problem was when resizing the browser, it wouldn't span the full width of the window, maybe you can check that yourself. Anyway, after your viewing tutorial, I will try again!
I'll take a look and see if I have any issues. Were you using a particular theme / browser / way of building your header?
same here, any way around that? I'm using Hello theme.
@@rocaivan In my case using a different theme (GeneratePress + Premium extension) gave me more options to style the header menu and it worked like a charm.
Thanks so much man! that's exactly what I was looking for
Thank you so much !
Hi, great! I don't understand how we can put a "don't like thumb" at this excellent tutorial! Merci beaucoup
When using Sticky header effect plugin, the menu is not responsive when resizing the browser window. Please try to resize browser to check out. Any way around that?
Of course :) Use media queries
Hi Paul. Quick question. What font are you using for your nav menu (top right-hand side)?
The option to change the logos color on scrolling is amazing, but I can't seem to find an option to change the color of the text on scroll. Can someone help me with that?
Hi, I found very good the tutorial, but there's something that's missing for me. If I set the home page template to Elementor Canvas, the header doesn't show, any help?
you have to set the header condition to entire site when saving the custom header
me too I don't know why
Great video.. Tks
Looks great. Will definitely use this to create different looks and colors for different times of the year. Also, has anyone else noticed an increase in speed after the latest WP update? After the update and install of the latest PHP version, my sites increased roughly 40% in load times. And that's all I did to the sites. Same Swift Performance cache plugin with a Bunny CDN. Lightning fast on Apache-Litespeed servers.
Do sticky transparent headers work when you have drop-down menus?
Great tutorial but now I can't edit any pages because the content section comes up in the "Edit Header" area and I can't turn off the the sticky part. Maybe I did something wrong, I am a newbie! The only thing I can think of is to reduce the top margin so it doesn't interfere with all my pages ability to edit. I really would like to have this but right now Im stuck waiting until I finish all my pages and then I fear I will not be able to turn it off sticky and be rebuilding my header in the future. Help please.
Yes this method is a simple solution for everyone who are not familiar with css! But what are the advantage of doing it with css instead of the plugin
?
Excellent Tutorial! How can I replace my astra theme header with the new created header template and keep the original menu? Thanks!
How do I do if I want change background color on sticky header when scrolling over next section?
Hi Paul, thanks for this tutorial. I seem to have a problem with this plugin... When activating the shrink effect the unshrunk menu disappears when scrolling back the top of the page. By unselecting the shrink effect, the unshrunk (original menu) reappears?
Have tried various settings including the 'Z' index of the menu (thinking that the plugin was forcing the menu below page content). Having viewed the plugin details, it states that it hasn't been tested with my current version of elementor. I suppose this could be the problem? Note: I am using the Hello theme and no other plugins apart from Elementor and Elementor Pro...
Apparently it's due to the negative margin that I set in the tutorial. Remove that and it should work perfectly. :)
@@WPTuts Thanks Paul. Did read the bit on the description and mention padding of the header section, which I reset. Will take off negative margin. If I do use the shrink effect I will try to adjust margin on pages section. Thanks again Paul, keep up the great work!
Any way to reduce height when is sticky?
I try shrink option, but when you scroll to the top the header disappear
@@TutoDS2014 did you ever sort this out? I'm having the exact same issue.
No
I am gonna do this tomorrow, it looks great. The transparency settings in 2 different places in the header would have driven me nuts.
It worked pretty well, nice effect. The only thing is that the menu goes missing after scrolling back up *to the top*, which is weird. The menu is visible upon arriving at the site, the menu sticks, it shrinks. But if you scroll back up and it is not there anymore. Scroll a bit down and it is there again. I cached/purged and tried a new logo, no avail. Common problem?
I fixed it. The negative margin was pulling my menu in after scrolling back up.
@@styzoom wanna link me your site?
would love to see your progress
When I enable shrink, the initial transparent header disappears from the top. Is there a way to fix this?
Did you ever solve this? I'm having the exact same issue.
@@mjd1971 I did. Although I don't remember exactly. Try checking the margins on your header in elementor and in wp>customize>header. For me, I believe it was something I did to the header while trying another method. You could always try to make another header template
Hi, im doing exactly as in the video, but my logo and other icons start to disappear. I was wondering if you know why an dhow i could fix that ?
Set the negative margin to the bottom, not top. Then it works. I have no idea how Paul got this to work by changing the top margin to -95. Thet will always result in the element leaving the view port.
followed your steps but the header will not show when i publish it what am i doing wrong its driving me crazy
Hey Paul,
I have implemented this thank you very much for your insightful WPTuts.
I am wondering if/how to only show the sticky header when scrolling back up the page as in howtogeek.com that uses this method of displaying the header only when required i.e. user starts scrolling back up the page to get to the menu.
I ve got problem. My page scrolls too high. When i scroll down and then maximally scroll up my Header disappears. Additionaly the background color is not invisible.....