How To Make A Sticky Header On Elementor For Free | Wordpress Sticky Menu
HTML-код
- Опубликовано: 5 сен 2024
- Welcome! In this video, I show you how to make a sticky header on WordPress using Elementor
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 Tech Support:
urielsoto.com/...
🟢 My Web Agency:
vluxdesigns.com/
MY COURSES:
🟣 Elementor Mobile Responsive Course
bit.ly/element...
🟣 Website Building Factory Course
bit.ly/website...
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a
![How to Create Transparent Sticky Header in WordPress with Elementor [FREE]](/img/1.gif)
EXTREMELY helpful! I’m not a pro designer, so I really appreciate the quick and easy to follow instructions. Under 10 minutes is a sweet bonus! Thanks!!!
I'm glad I could help. I might have an updated video in the future.
Hi can anyone help me? I can't change the font color when scrolling the page.
I have been looking for this for ages in my native tongue SPANISH, & never got it. So I decided to go for it in English and this is it! The very first one and it is just great!
Thanks 😌
Awesome glad I could help. I have a different alternative to doing it as well in this video ruclips.net/video/Rup6xPPcAbk/видео.html
Hi can anyone help me? I can't change the font color when scrolling the page.
Been looking for a tutorial like this for a free version of WordPress. Tried a lot of plugins but this one works extremely well for me. Thank you very much!
I got another method I uploaded recently ruclips.net/video/Rup6xPPcAbk/видео.html
@@UrielSoto Will check it out.
After looking all other videos on RUclips my search ended up on your video being most relevant to my requirement. Kudos to you!!
What is up guys make you different from all others, its makes me smile everytime. Thank you for helping me, thank you for really helpful content. God bless!
in my sticky header effect apper notif like this : This plugin does NOT control the sticky position of the header. Please use the above Motion Effects tab sticky options to make the header sticky . anybody can help me? :(
i have the same problem :( it does work but it looks really messed up
Have you figured it out? I'm struggling with it now
You are a genius! Thank you.
Hello, thanks for the video. I cant find the pluggin Elementorkit Lite. Maybe a different name I can find it? Thanks again!
Most helpful. The design has changed somewhat, but I was able to get it working. Cheers
U r such a lifesaver! Thanks for caring for not a pro user!
Of course :)
Hi can anyone help me? I can't change the font color when scrolling the page.
by the way what software you used in the video for screen recording?
Thank you for helping us with the free version of Elementor!
Sooooooooooo many thankss brother. You're an everyday hero
Thank you very much for your video! I don't have the "sticky header effects" option under advanced settings.
Install the "Sticky Header Effects for Elementor" plugins to active this effect.
Hi can anyone help me? I can't change the font color when scrolling the page.
thank you so much, Now I am able to add sticky header in my website.
Thank you very much! Very helpful, and I am pleased you took your time to share this cool advice ;)
its so easy thanks sir from pakistan
great video thank you. The only thing I cant figure out is how to change the menu typography color when scrolled down. I want my header to be transparent with white text, when I scroll down I want the header color to turn white but then the white text is not visible. Any idea how to do this? Thanks
Hi Uriel, is there a way to change the logo (i.e. different color/size) and the font color of the menu once the sticky header is triggered?
Yes. Go to sticky header effects, then choose shrink logo
MAAAANN I wish I saw this video a few month ago. Would have saved me money and a lot of time. Thanks!
Well at least you saw it now. Don't miss out on any of my other videos ;)
Hi can anyone help me? I can't change the font color when scrolling the page.
excellent. thanks.
Hi Uriel and thanks for the video. I've been using the plugin for couple years now (with free elementor). All of a sudden, the plugin stopped working. Trying to deactivate other plugins didn't help. I'm currently using a WordPress version 6.3.1 with Twenty Sixteen theme. Any ideas what to do?
Resolved already, by rolling back to a previous version of the plugin.
You can try this method instead. ruclips.net/video/Rup6xPPcAbk/видео.html
Hi this is very helpful. But one thing how we can change menu text color on scroll??
Please let me know if you find the answer. same situation here!!!
I might have a solution to that soon. I'll have a video coming out soon on creating a sticky header a different way.
@@UrielSoto can´t wait!!!! thanks
Thank you Uriel, your video help me a lot and solve my problem ! !
Thank you 😊
Thank you bro🤙
yet again helpful, thanks man
thank you so much
Great. This is extremely helpful. Thank you.
Thank you man, This video really helpfull
THANK YOU
Thanks a lot for such a great video
thanks man for this amazing tutorial 😊😊
You really help me a lot today, I'm also not a pro designer, thanks for the help man I really appreciate it!
You're very welcome.
Hi can anyone help me? I can't change the font color when scrolling the page.
That was extremely helpful! thank you man!
4:40 right here i was looking for this solution
thankyou . 1 month and ago iam searching this tutorial ..
Glad I could help!!
Hi can anyone help me? I can't change the font color when scrolling the page.
Thanx a lot! Very useful! Please keep posting)))) especially for non-pro users)))
Thanks, will do 🙂
Hi can anyone help me? I can't change the font color when scrolling the page.
hello!! I've tried with the other tutorial that you have but didn't work, actually worked but for a while dunno what's happened but then didn't work anymore. So, lucky me that I've found this other video because I'm using elementor free, it works perfectly. Thanks :)
Awesome! I'm glad this video helped. That's why I make them. :)
Hi can anyone help me? I can't change the font color when scrolling the page.
Thanks, it worked!
Super helpful! Thank you sooo much!
No problem :)
Worked, thank you
Quick -- easy -- to the point .. thanks
Hi.. thank you soo much for giving such a valuable information, I can able to design almost 70% website by watching your videos and your suggestions, is it good to use plugins for booking services form, or can you suggest me the best plugin for booking form where customer can select categories and sub-services
Please tell me the name of the plugin you install to make it on sticky
Great one, Thanks
thanks a lot
Thanks Man 😍😍😍
You saved me
Awesome, thanks!
Hi!! Nice video very helpful but I have one problem when I editing the menu it doesn't show the options in the menu selection it is like a visual bug because it doesn't show the drop menu to choose any menu version. I hope you understanding I try in a different browser (Mozilla & chrome) but not working :( I hope you can help me
Thank you very much for your video! I don't have the "sticky header effects" option under advanced settings. I chose the full header. Did they maybe change this in the new version?!
Install the "Sticky Header Effects for Elementor" plugins to active this effect.
Are all these plugins going to make my page load slower? I also heard some of them weren’t completely safe. I read that vulnerabilities are pretty widespread within the third party plugins that are add-ons to Elementor, which I’m not surprised by since … free plugins and all.
Use this method instead if you don't want to use a plugin ruclips.net/video/Rup6xPPcAbk/видео.html
how to add hover effects to menu buttons. to this elementor kit or sticky header effect for elementor.
Hi man, thanks.
I want to know how to create pricing at home page. with press buy now and then direct go to cart page.
This video should help ruclips.net/video/jzNAGR--ja4/видео.html
Hi can anyone help me? I can't change the font color when scrolling the page.
There is no Sticky Header Effect in my version of Elementor (free version) ? Have they removed it?
same
@@nemesis2pro87 you have to download the plugin "sticky header effects"
Really helpful content!
nice, very helpful
Thanx a lot! Very useful
You're welcome :)
Thanks
Got you!
may I get some help on how to do the transition time in a proper way, so the lag when scrolling down doesn't appear?
Thanks so much! Really appreciated!
Hi can anyone help me? I can't change the font color when scrolling the page.
Thank you! Worked for me. :)
Hi can anyone help me? I can't change the font color when scrolling the page.
Hi Uriel.. Very helpful video. But there is a problem. I am not able to customize submanues.
Thanks for the video am having problems doing this with elementors non-pro version
I'll be making a video on a new way of making sticky headers for free soon.
Hi, thank you for the video! it really helps me😊
You're welcome!
Hi can anyone help me? I can't change the font color when scrolling the page.
Thanks for the video, but the Sticky option doesn't show up on my wordpress
Hey, first of all, thank you for the video! Really appreciated. I have a question though, unfortunately. I am using OceanWP with a boxed layout. It looks fine at first and is all within the box, but after scrolling it reaches outside of the box, only on the right side. The left is still fine, it just doesn't end with the box anymore. I tried to manually set this section to the same width as the box, but it didn't do the trick. Do you have any ideas? Thanks a lot!
Help! When I click preview mode, my menu disappears. Not the whole thing, just the links to the individual pages. Any ideas??
Hi! Great tutorial! my sticky header scrolls to the top right though when the page is zoomed out. I know it has been 3 years from this video but I hope someone can help? Thanks!
Hi, i am trying to create an header menu and the toggle button doesn't clickable but on my editor it's working. How can i fix this please
I was looking at this tutorial and saw that somethings changed: the menu is called now: "Header Footer" and it seems that the layout was also changed. Anyway, I got the sticky header and also realized that there are only three free headers, so, I chose one of those.
A question: is it possible to remove the search field (magnifying glass) from the header or is it fix?
Thanks
Edit: I found it. You just have to right click on the column, then you can delete it. It is working and the free headers are actually enough for most needs.
Hey, this was great, however, it doesn't seem to display it correctly for mobile? I have made some changes and they display on all pages except the homepage, the homepage still shows the images that I have selected to hide on mobile? Any thoughts, help? thank you
I just uploaded this updated method yesterday. Let me know if this works instead ruclips.net/video/Rup6xPPcAbk/видео.html
Hi can anyone help me? I can't change the font color when scrolling the page.
Hope I get a response. It seems like for some reason the header is not applying to any of my pages.
is there a hamburger menu (toggle) option?
thank u
Yo Man ! Cool video ! Is it possible to change the color of the font and a different image for the sticky?
Yes I think there's an option in the plugin. The other way would be using css
Hi Uriel... thanks this is great and these two plugins work great. I have a question, please. My menu is now sticky, but my menu items are jumping to section markers down the page. My problem is when I click, everything works great, but the top of the section is behind my header and cant be read. I've searched but I cant get a way to get the "body or section tops" to appear underneath the header and not behind it... any ideas?
Thanks Pieter
You need to make your z index on your header a higher number from all your sections. I would suggest making it 1 or 5.
Thanks a lot, you really help me and it's working. Can i ask u something else? Do you know how can i put a background video with the sound of it, and with an icon for let the people turn off or on? coz i'm trying to do it with elementor free but i can't.. there is other way to do it? and how?
Wish I could help but I don't know
Hi can anyone help me? I can't change the font color when scrolling the page.
Hi, is it possible that the Sticky Header Effects section is PRO now? I'm not seeing it.. That would be dissapointing..:(
Yes.
Hey, thank you a lot for the video! Important question: Can I turn the sticky header off for just some pages?
Yeah but you would have to make make separate headers for those pages and just turn off the sticky header.
Hi can anyone help me? I can't change the font color when scrolling the page.
Unfortunately it doesn't work anymore. The free version of the "Lite" plugin there is no my template function and I can't create it. 😭
I'm having this problem: the Sticky header scroll distance was set to zero because I always want it to be on the top and I don't want that jump that it makes as soon as that scroll distance is reached; it just doesn't look nice on SmartPhones.
Now the problem I'm having: the jump is been seen only once during loading time. Is there any way of removing this effect? I could think about some css setting or even JQuery.
hey great vid, I just made the header, but it doesn't appear on my page. Any clue?
Did you a a z-index of 2 in the advanced settings of the header section?
@@UrielSoto I already tried but the header still doesn't appear :( I'll appreciate another idea of how to solve it
I already made header from theme! how can i make elementor header
good video!! I have a question. How can I change font in sticky header(menu)??
Its the same way as regular header.
Hi can anyone help me? I can't change the font color when scrolling the page.
how can i change the color of the menu?
Hey man, great tutorial, but I have one question. Am I able to make the header background and text change colour on scroll? Eg. starting position header: transparent, text: white, on scroll header: white, text: black. Something like that.
Yes but you would have to use some css. This tutorial might have that option. ruclips.net/video/PtLIK4EGWzI/видео.html
@@UrielSoto ok, thank you so much
Hey thanks heaps! is there anyway of adding a drop down menu to this? Such as adding a hamburger button (Three lines menu icon) and having your menu's drop down! Thanks!
Maybe this video can help :). ruclips.net/video/3BiHXi_sSAY/видео.html
Hi can anyone help me? I can't change the font color when scrolling the page.
It's a great tutorial. May I know how to change the sticky font color.
You may have to add some custom css. I'll try and make a video on that soon.
@@UrielSoto thanks a lot,Uriel!
Hi can anyone help me? I can't change the font color when scrolling the page.
Hello Uriel, great tutorial. When I followed your steps, I then add this message "IMPORTANT: This plugin does NOT control the sticky position of the header. Please use the above Motion Effects tab sticky options to make the header sticky". I've checked the motion effects it get nothing from there. Any clue please ?
got the same problem somehow... did you manage to fix it?
@@marcvt sorry for late reply! I had to go through another solution to get it done as the problem persisted!
@@Morchyzer Hey, would you please tell me your solution? Seems it doesn´t work with the sticky header plugin anymore.
It doesn't works for me. Don't understand why. When I try to insert a header from Elementskit it appears to be downloading but remains blank :/
Nevermind. They told me they are working on it. They're having a compatibility issue with the latest 3.0 Elementor update, so I rolled back to the previous 2.9 and it worked just fine.
We all appreciate your help, however, you need to slow down so newbies can follow you more easily.
The content is COOL ..... If able to slower a bit during the setting color section ( may be BEST ) :DD ......
You could set the speed of the youtube video to 0.75x. I often change the speed (faster or slower according to my previous knowledge)
Is there a way to make the top bar sticky along with the header? Thanks!
Yeah it's the same way. Just go into the advanced settings and go under sticky header.
Hi can anyone help me? I can't change the font color when scrolling the page.
YAAAAS THANK YOUUUUU
Hi, thanks for your tutorial! Super helpful :)
I'm having one slight problem: it's off center. I tried troubleshooting however I thought I could but nothing seems to work. Any ideas?
Thank you :) What theme are you using?
@@UrielSoto Astra
Hi can anyone help me? I can't change the font color when scrolling the page.
Hey Uriel, just a question. In (2:20) how do you select a menu? I just can't :/
You're can create a menu in the dashboard under appearance - menu
I finally found someone to help with free elementor. I was following along until I got to the part to edit the header. can you help?
What do you need help with?
Hi can anyone help me? I can't change the font color when scrolling the page.
the shrink effect is not working can you solve that too ?
Try this video ruclips.net/video/8au9IglS17Q/видео.html
Good job bro