you have no Idea how much it took me to fix this problem, after being stressed for a whole day trying to find a way to make the menu stick I found your video today and it actually worked, thank you so much🙏
Uriel, you are a saint! I have a sticky header on my site which went haywire yesterday, and as I couldn't remember how I created it in the first place, I have been unable to fix it. Thank you so much for this. Actually, you had been on my mind recently because I seem to remember some way you had of using CSS on an Elementor site (which WASN'T the PRO version). On the other hand, I could be dreaming it, but I am pretty sure it was you. I just can't remember which video it was or how to search for it as it was not the main theme of the video as I recall. Anyway, thank you sincerely for your great timing with this one! Best wishes, Gerard
You're welcome Gerard. I knew I had to find an easy way for people to create a sticky header on any WordPress website. It really shouldn't be so hard and stress people out. I've been getting tons of questions about sticky headers not working. So I worked to find an easy new method that would work for everyone hopefully. Once I found it I knew I had share so everyone can sleep a little better at night haha.
tysm! went from having some buggy plugin that only caused problems on certain resolutions to having 10 lines of additional css to get the same result without any bugs
Well, it is working great but there is a problem with the mobile/tab display the menu operated with the toggle button which is in off canvas panel hides behind the sticky header done with this plugin. it (dropdown menu in mobile phone) has to be opened under the sticky header. Now what is the solution of it
similar we can do any kind of browser developer mode . but problem is if it did position fixed width 100% top 0 ; left 0; etc.. below articles or element object disappeared . what I do .
Hello! I have a colored strip with anouncment above my header and when I do this, the header becomes sticky but that is a space where the strip was. How can I fix it? :(
Thank you for your tutorial Uriel. It worked perfectly. The menu finally stayed in place. But, being a very new user to WP, I seem to have created a new problem. Now, when I scroll, my web page content scrolls right over the menu text. On yours, the web page content scrolled behind the menu bar. How do I accomplish that?
Hi! I have a menusymbol for tablets and phones in the menu. as soon as a scroll down and click the sticky menu symbol, it doesnt show the undermenu sticked to the menu symbol. I can find the undermenu at the top of the website, so with this prosess i can not get the undermenu on tablets and phones properly done. how i can i fix this?
I was able to get the sticky header working which is great but tried to change the opacity but it just stays white and completely opaque. Can anyone help me make it transparent? I tried changing the value in the opacity box but nothing seems to make it change, I tried 1 and 100. Any help would be much appreciated
On the live version of the site right click and inspect and select the header element. You need to find the background style that is applied and target that with CSS. Add opacity: 0.2 to that class
i have a problem on astra when i open on mobile the menu is not fit and not following can anyone help me? BTW this video is very helpful more tutorial KEEP IT UP
Thanks for the info! This does make the header stick but also turns the header transparent when used on Astra theme along with Elementor page builder. A solution around the same would be highly appreciated.
I'm using another theme and it also turned the background transparent. If you tried the opacity setting, then it will only affect the text, even if you set the background to white. I could solved this with a different plugin: "Sticky Menu, Sticky Header (or anything!) on Scroll". It makes also the background transparent, but if you modify the CSS, then you can set the opacity to one and the backound-color to white. It works. The method explained here didn't actually makes the header sticky. It will just fix it on the top. If you see here: 4:20, then you will notice how a small part of the top will be dropped. A real sticky header won't drop the content. This could be also fixed by adding some white space on the top, but I guess you need to use css as well.
MMM, mine is not actually a good solution: as soon as you resize the window, the header will look ugly. It won't be auto fitted. So it works if you keep the windows always with the same dimensions. Anyway, if you are interested on the details, I was using the template: "Neve by Themeisle". I had to look for the id of the top menu, which on my case it was: "#header-grid". I put that on the Sticky plugin. Then I set the opacity of the header with the plugin this person show here to, for example: 0.7.
Hi, so I tried to do this on my website that I'm just doing without any experience and it didn't work :(. I currently use elementor and yes I used astra so I deactivated the header, footer like in the video. When I refreshed my website the header was no longer transparent, the copyright and powered by info was now on the top and my screen would not scroll up or down. Does anyone know how to fix this and get it to work? Any help is appreciated. Thank you Uriel I almost achieve this.
OceanWP is the most stubborn theme to work with. This procedure does not apply to it. Sticky Header effects for Elementor plugin works fine but you have to do negative top margin to achieve a sticky header
as always, fucking great tutorial. do you have a patreon or somewhere i can donate to you? I have watched many of your videos and want to show my gratitude
you have no Idea how much it took me to fix this problem, after being stressed for a whole day trying to find a way to make the menu stick I found your video today and it actually worked, thank you so much🙏
Wooow. This one is much easier. Thank you for the tutorial.
I was stuck on non working plugins for 4 days and you solved the thing, ggs
Thanks a ton, bro. That was easy and straightforward. Congratulations!! You won a subscriber and a like. :)
Thank you I have been looking for a tutorial like this.
awesome ...worked for me ...was struggling to get it done but your solution was the best
Uriel, you are a saint! I have a sticky header on my site which went haywire yesterday, and as I couldn't remember how I created it in the first place, I have been unable to fix it. Thank you so much for this. Actually, you had been on my mind recently because I seem to remember some way you had of using CSS on an Elementor site (which WASN'T the PRO version). On the other hand, I could be dreaming it, but I am pretty sure it was you. I just can't remember which video it was or how to search for it as it was not the main theme of the video as I recall. Anyway, thank you sincerely for your great timing with this one! Best wishes, Gerard
You're welcome Gerard. I knew I had to find an easy way for people to create a sticky header on any WordPress website. It really shouldn't be so hard and stress people out. I've been getting tons of questions about sticky headers not working. So I worked to find an easy new method that would work for everyone hopefully. Once I found it I knew I had share so everyone can sleep a little better at night haha.
@@UrielSoto I'm so thrilled you posted it. It was like an early Christmas present. Thanks again!
Well there's plenty more coming haha
If there are 2 menus at the top, how do we make them both sticky?
tysm! went from having some buggy plugin that only caused problems on certain resolutions to having 10 lines of additional css to get the same result without any bugs
Thanks it’s worked
why are these videos so completed? i searched lke 10 videos trying to find out how to do this and i turns out to be SUPER EASY! (July 2024)
Now we can have a sticky header whitout being super buggy thanks !
Simple but very dynamic good tut. thanks
Well, it is working great but there is a problem with the mobile/tab display the menu operated with the toggle button which is in off canvas panel hides behind the sticky header done with this plugin. it (dropdown menu in mobile phone) has to be opened under the sticky header. Now what is the solution of it
Thank you sir
similar we can do any kind of browser developer mode . but problem is if it did position fixed width 100% top 0 ; left 0; etc.. below articles or element object disappeared . what I do .
Thanks for this, also can we make it transparent while it's on the top and when scrolling down it goes to it's original color?
Hello! I have a colored strip with anouncment above my header and when I do this, the header becomes sticky but that is a space where the strip was. How can I fix it? :(
Thank you for your tutorial Uriel. It worked perfectly. The menu finally stayed in place. But, being a very new user to WP, I seem to have created a new problem. Now, when I scroll, my web page content scrolls right over the menu text. On yours, the web page content scrolled behind the menu bar. How do I accomplish that?
it works perfectly! thank you!
This is awesome. so helpful
Thank you... it worked on my site.
Good explain, i did on my site
THANK YOU I NEED THIS ♥
thank you so much, it helped me alot with this tutorial
Thank you so much great...u cleared my doubt
Yes it worked perfectly. Thanks man :)
It is working but the content is going back side of the header in mobile.
i use for elementor, when i click "fixed", the section is disappeared.. can you help me?
make sure the width settings is 100%
It works on PC but not on mobile, did I do anything wrong?
Hi! I have a menusymbol for tablets and phones in the menu. as soon as a scroll down and click the sticky menu symbol, it doesnt show the undermenu sticked to the menu symbol. I can find the undermenu at the top of the website, so with this prosess i can not get the undermenu on tablets and phones properly done. how i can i fix this?
I'm using Generate Press theme and it does not seem to work with it. Any tipps?
bro i love you sooooooooooooooooooooooo much
Thanks for the video but it cut-off my hero image. Any solution for that?
Great tutorial again, keep up.
Thank you. I really tried to make this one simple for everyone.
Its not working on my website and my header got hidden.
Excellent
Mine just disappeared after setting "fixed". Any idea what could be?
I was able to get the sticky header working which is great but tried to change the opacity but it just stays white and completely opaque. Can anyone help me make it transparent? I tried changing the value in the opacity box but nothing seems to make it change, I tried 1 and 100. Any help would be much appreciated
On the live version of the site right click and inspect and select the header element. You need to find the background style that is applied and target that with CSS. Add opacity: 0.2 to that class
i have a problem on astra when i open on mobile the menu is not fit and not following can anyone help me?
BTW this video is very helpful more tutorial KEEP IT UP
same here :(
same gere
It seems it doesn't work on mobile. Only on PC
simple, gratis geile Lösung!
Thanks for the info! This does make the header stick but also turns the header transparent when used on Astra theme along with Elementor page builder. A solution around the same would be highly appreciated.
I'm using another theme and it also turned the background transparent. If you tried the opacity setting, then it will only affect the text, even if you set the background to white.
I could solved this with a different plugin: "Sticky Menu, Sticky Header (or anything!) on Scroll". It makes also the background transparent, but if you modify the CSS, then you can set the opacity to one and the backound-color to white. It works.
The method explained here didn't actually makes the header sticky. It will just fix it on the top. If you see here: 4:20, then you will notice how a small part of the top will be dropped. A real sticky header won't drop the content. This could be also fixed by adding some white space on the top, but I guess you need to use css as well.
MMM, mine is not actually a good solution: as soon as you resize the window, the header will look ugly. It won't be auto fitted. So it works if you keep the windows always with the same dimensions.
Anyway, if you are interested on the details, I was using the template: "Neve by Themeisle". I had to look for the id of the top menu, which on my case it was: "#header-grid". I put that on the Sticky plugin. Then I set the opacity of the header with the plugin this person show here to, for example: 0.7.
Just select the background colour the same as the original background .
how to undo. Please help
Hi, so I tried to do this on my website that I'm just doing without any experience and it didn't work :(. I currently use elementor and yes I used astra so I deactivated the header, footer like in the video. When I refreshed my website the header was no longer transparent, the copyright and powered by info was now on the top and my screen would not scroll up or down. Does anyone know how to fix this and get it to work? Any help is appreciated. Thank you Uriel I almost achieve this.
You can do this with the Elementor header. Just do it with the Elementor header.
I am working on wordpress website
OceanWP is the most stubborn theme to work with. This procedure does not apply to it. Sticky Header effects for Elementor plugin works fine but you have to do negative top margin to achieve a sticky header
Bro some video need like Acf and cpt ui নিয়ে Please
as always, fucking great tutorial. do you have a patreon or somewhere i can donate to you? I have watched many of your videos and want to show my gratitude
Thanks man! I really appreciate that. No I don't have a patreon. Now I'm thinking about getting one 🤔
I just created a Patreon 😁 www.patreon.com/urielsoto
Fucking great job bro! Thanks!
Thanks man!
1:55
2:45
Dont work with mobile sites bro.
same problem you already fix your issue?
still not working. please help
Did you get another solution? This doesn't work on mobile.
no, its work just with 1 page not entire website. dislike, sorry
On point