You're channel doesn't get nearly the appreciation it deserves. The tutorials are clear and easy to follow, not to mention that this video just solved the issue I was dealing with. THANK YOU :)
Hello, thanks for this video. But I would like differents logo when scrolling. First logo in PNG with no colour, then when scrolling the logo have to change. Thanks 😊
Guys! When I pasted the code on Wordpress it transformed a few lines. Now is fixed. It should work again! Here is the updated code: livingwithpixels.com/resources/transparent-sticky-header-tutorial/
You have made this so easy and smooth. Thanks for the effort to explain in great detail. I have honestly invested 16 hours fighting with this problem and in a few minutes , as the header was already made, I pasted in your code and great results.
Best channel on Elementor hands down! Keep up the good work.
4 ปีที่แล้ว
Hi, Rino. I am a webdesigner from Argentina. I have 47 years old and I started web designing in 1998, with Frontpage98. Passed trough Drumbeat, Flash, then Woocommerce with Visual Composer and now Elementor. Just want to thank you for taking the time to teach us. If I can return the favor anytime, just contact. :)
Been on TH-cam since I'm not sure how many years and I'm almost sure this is my first comment ... I looove your page Helping me so much , fav channel !
Absolutely in love with this channel and your personality. Your teaching skills are brilliant and the topics you bring up in your videos come in so handy and you make it a piece of cake with step by step explanation. Thank you very much for the effort and time you put into your tutorials.
Hi Rino. I am new to web design and also Elementor. Here in Singapore, I have been searching the internet to learn this new skills and chance upon your tutorials. Thanks for all the efforts taken to share your knowledge and it is very useful and straight forward to learn from your tutorials. Once again, keep up the good effort and I am appreciate your kindness in sharing.
First channel to effectively teach elementor. Before (much needed) all I would see was how to import templates and do minor edits. I’ve been watching your videos for a few weeks now. You got yourself a new subscriber!
Subscribed! Really easy to follow and very well explained. Thank you for sharing this tutorial, I've been thinking about this layout for a while now. Looking forward to more Elementor tips and tricks! ♥
You´ve teached me so much about webbdesign, wordpress and elementor. I´ve always wanted to do this for a living, and now I do. Thanks to you. I am very, very thankful for all the work you´ve put in creating youtube-content so that we can learn. I want to repay you somehow so I can show my gratitude. Is there any way to donate or something? Wish you all the best, I really do.
Door deze video's elementor pro gekocht en net succes de blog website kunnen maken, die probeerde ik vandaag te combineren met deze header, maar daar ga ik nog ff ergens de mis mee in, en weet nog ff niet waar precies, maar ga verder puzzelen ermee, en dank voor deze geweldige video's die me dit leren en ik een leuk blog aan over heb. :)
Hey dude you're the guy! Awesome videos and ideas. Here in Brazil we say " Esse cada é foda!" - something like "This's the man", you know. Thanks, by way
Nice!! I was indeed pulling hair on headers...love the transitions and the codes were especially neat. Thanks for being generous in sharing. Your explanation's made it so much easier.
Thank you Rino. Fantastic job. I'm still amazed that Elementor has not added this functionality, considering how popular transparent headers have become.
I guess its not only me who want to see full page screen shot of your products! I love the transition of color from your first section to the next one!
YOU'RE THE BEST!! This worked perfectly. Thank you so much! I also found in the comment section on how to make your background white and change the font color!
Hey Rino. First things first, I just started learning WordPress and I'm so glad I found your channel. Now things are a hell lot easier. Keep YouTub-ing. LOL, if that's even a word !! One more issue that I faced is after adding this header template to my entire site, I cannot edit my pages' top sections individually because it falls below the sticky header. Would be nice if you could help. :)
Love the tutorial, was needing to update my header and love this styling. An idea for a future video if its something that is possible in Elementor, is when you scroll down instead of the logo getting smaller it changes into a different logo. For instance, my logo transforming into a different version where it uses just my initials, essentially a completely new image
I am no expert, but perhaps this might help: css-tricks.com/replace-the-image-in-an-img-with-css/ Since he added the condition of 100px, it should not happen until you scroll.
Good video. However, for those who don't want to write code in CSS, the "Sticky Header Effects" plugin that integrates directly into Elementor does a great job. It's also useful for those using basic Elementor (not PRO). It has one more very nice feature: it can make the background transparent with a "blur" effect, which is very nice (the background blurs slightly).
Thank you so much. You are so sweet to teach and easily catchable. Thank You, it Helps me A lot to solve my issue & of course Best wishes from My Heart.
Oh man, I'm the 666th comment!!!! WOOT. Hey your video was extremely helpful and valuable to me. It was so easy to understand and implement and I really appreciate it. I've subscribed. 💯
Great video, I can't wait to start using this on new projects! This really helped out. Looking forward to that logo in dashboard/login in future video. Keep up good content :)
Rino, I love this tutorial. Your teaching methods are so easy to understand. Question: is it possible to add a second row to the header? I want to add the Social Icons , a "Join" button" and a search bar above the navigation.
Hey there. Your video was awesome. Really well done. It gave me confidence. Well, I ran into a problem. Everything is working except the background of my header is white rather than transparent. When I scroll to the Effect Offset point, then the background changes and the header sticks, etc. All good expect the starting point where the Header has a white background. I've gone over the settings multiple times and believe I'm following your advice. I'm hoping you've heard this before from people like me and can recommend a quick fix. I have used Elementor off and on for 4 years now. My skill level is intermediate. Thanks for the great video. I know this is on my end and hoping you can help.
You have a great easy and simple way to explain tutorials. Keep up the good work. I've seen a lot of tutorials and yours are so easy and simple to follow. Thanks a lot
Problem - when i update in elementor everything looks fine, but when i check on site its not animating the background of header. Its not shrinking as it is in elementor.
Great video. It was exactly what I was looking for. I wish there was some clarity about the yellow triangles I get in the CSS code though it still works!
You're channel doesn't get nearly the appreciation it deserves. The tutorials are clear and easy to follow, not to mention that this video just solved the issue I was dealing with. THANK YOU :)
Totally agreed
Your teaching skills + Custom CSS Tricks = Perfect tutorials. So please, more CSS tutorials with elementor pro.
Hello, thanks for this video. But I would like differents logo when scrolling. First logo in PNG with no colour, then when scrolling the logo have to change. Thanks 😊
Guys! When I pasted the code on Wordpress it transformed a few lines. Now is fixed. It should work again! Here is the updated code: livingwithpixels.com/resources/transparent-sticky-header-tutorial/
You should post more videos! I love how the way you explain! so easy to follow your instructions!
not work now
Instead of shrinking the logo can I shrink the whole navigation bar? It looks like your bar adjusts size at 6:08.
Brother, the shrinking effect doesnit working
Hello, Im still having a hard time with the icon striking to a certain size.
You are the one amongst a lot of youtubers who actually makes it super simple and easy. Thanks!
This menu automatically upgraded my website, it looks so much more professional thank you very much!
You need to get a oscar brother, this is one of the best videos i found on youtube to start codding from basic. well done and thanks
King of Elementor. Thanks
You are the GOAT Rino🙌. Here in 2024 and your tutorials are always helpful. Thank you!
ooooh! very nice tutorial!!! I have been a web developer for over 20 years and each time I find that Elementor is a wonderful tool for web design.
You have made this so easy and smooth. Thanks for the effort to explain in great detail. I have honestly invested 16 hours fighting with this problem and in a few minutes , as the header was already made, I pasted in your code and great results.
Best channel on Elementor hands down! Keep up the good work.
Hi, Rino. I am a webdesigner from Argentina. I have 47 years old and I started web designing in 1998, with Frontpage98. Passed trough Drumbeat, Flash, then Woocommerce with Visual Composer and now Elementor. Just want to thank you for taking the time to teach us. If I can return the favor anytime, just contact. :)
Rino, I really love the way you teach. You are the best! Wishing you one million Views in advance.
Been on TH-cam since I'm not sure how many years and I'm almost sure this is my first comment ... I looove your page Helping me so much , fav channel !
Bro! Seriously, Love you!!!! I´ve been searching a lot to do this with a smooth transition and I finally do it!!! Thank U!!!!
I LOVE YOUUUUU!!! I've been trying to make exactly this change to my site's header for a long time!!! thanks for your tutorial!!! simply perfect!!!
Wow! I usually don't like any videos with code but you made this seemless and easy! works perfect on my site. Thank youuuu!!!
Now THAT is a unique content. Amazing how we have everything on TH-cam and nothing at the same time. Congratz for making the TH-cam have everything
Me llamo Jose soy de Venezuela agradezco mucho tus tutoriales amigo.
Thank you once again for this outstanding no nonsense content. You're number one fan in Ireland.
Absolutely in love with this channel and your personality. Your teaching skills are brilliant and the topics you bring up in your videos come in so handy and you make it a piece of cake with step by step explanation. Thank you very much for the effort and time you put into your tutorials.
Thanks for this huge compliment! Makes my day 🎉
Hi Rino. I am new to web design and also Elementor. Here in Singapore, I have been searching the internet to learn this new skills and chance upon your tutorials. Thanks for all the efforts taken to share your knowledge and it is very useful and straight forward to learn from your tutorials. Once again, keep up the good effort and I am appreciate your kindness in sharing.
Hey there! I´m a lawyer from Brazil and just want to thank you, pretty much!!!
Big Boss. Thanks for this tutorial. My best teacher on TH-cam
Bro I just landed on your page after 2 days of searching for a solution to this sticky header for my website. Thanks a mil!
Awesome tutorial, where have you been in my life for the past 2 years. I'm subscribed now, keep putting out great tutorials.
First channel to effectively teach elementor. Before (much needed) all I would see was how to import templates and do minor edits. I’ve been watching your videos for a few weeks now. You got yourself a new subscriber!
I don't know how to say thank you. I set this to my portfolio. And it works perfectly. Thank you once again
Hi Rino,
just want to say thank you. Your videos are amazing.
Keep up the excellent work!
Eres un crack 🔥 muchas gracias por tus videos, te lo juro que son oro puro. Te comento en español porque es mi lengua materna jaja Saludos.
Rino, I like this approach more than having an additional plugin for sticky header effects. Thanks!
Thanks man. You are helping a lot of us for free of cost.
Amazing, fast and clear ... this is a milestone. Good job Rino !!!!
Fannnntastic sharing! I learnt it all by your tutorial in just 30 mins! will surely follow this channel onwards!
Best explains tutorial ever.... Many thanks Bro... You are Brilliant...
Thank you! I've been watching other videos / reading tutorials and this is the first one that works perfectly without any buggy scrolling effects
I'm from Indonesia, and Thank you so much for all the really helpful tutorial!!!
Subscribed! Really easy to follow and very well explained. Thank you for sharing this tutorial, I've been thinking about this layout for a while now. Looking forward to more Elementor tips and tricks! ♥
Well, it's been ages since I've seen such clear explanations and step by step instructions. You are awesome! Keep on and thank you!
Exactly!
I love this channel - just purchased the xd web design tutorial - definitely worth it! Thank you!
Dude saved me hours of research. Love you bro, no homo.
You´ve teached me so much about webbdesign, wordpress and elementor. I´ve always wanted to do this for a living, and now I do. Thanks to you. I am very, very thankful for all the work you´ve put in creating youtube-content so that we can learn. I want to repay you somehow so I can show my gratitude. Is there any way to donate or something?
Wish you all the best, I really do.
I think that you are the best explainer of elementor
Door deze video's elementor pro gekocht en net succes de blog website kunnen maken, die probeerde ik vandaag te combineren met deze header, maar daar ga ik nog ff ergens de mis mee in, en weet nog ff niet waar precies, maar ga verder puzzelen ermee, en dank voor deze geweldige video's die me dit leren en ik een leuk blog aan over heb. :)
Hey dude you're the guy! Awesome videos and ideas. Here in Brazil we say " Esse cada é foda!" - something like "This's the man", you know. Thanks, by way
Hi there! I wish I could find a tutorial on how to do this with Avada. Do you by chance have a tutorial on that?
Nice!! I was indeed pulling hair on headers...love the transitions and the codes were especially neat. Thanks for being generous in sharing. Your explanation's made it so much easier.
Thank you Rino. Fantastic job. I'm still amazed that Elementor has not added this functionality, considering how popular transparent headers have become.
You're so awesome and u explain everything very clearly!! you get a new fan now :DDD
Robiłem to dosłownie 3 lata temu i mi się zapomniało. Znakomity video :D pozdrawiam od WebCreateSite
Awesome, man! Thank u a lot.
So useful insight to vast my skill about wordpress. So many videos I have watched but it couldn;t solve my problem about this. Thank youu so much !
Thank you so much, Rino!!! great tutorial and code, much appreciated!!!
Thankyou so much, its so simple and easy to understand!
This blows me away ... Your one very talented dude! Cheers for this man 😎
I guess its not only me who want to see full page screen shot of your products! I love the transition of color from your first section to the next one!
Your teaching skills are very well
Thank you for this video! I couldn't get the Astra Brainforce guys to help me! You made it simple!
这教程真是好，解决了我的大问题，研究了2晚上也没研究出来。
Great video. Thanks for doing the research to get this code to all us non-programmers.
The best video on this subject ! Thanks for this amazing tutorial :)
Amazing amazing worth every single second put in
Thank you so much for such a great content. I am watching all of your videos.
Great Video. I think your speed of instruction was great.
Everything is clear and to the point with the right amount of explanation. Your content is amazing, thank you!
Super helpful and informative! Thanks. Keep it up ✨️🔥
YOU'RE THE BEST!! This worked perfectly. Thank you so much!
I also found in the comment section on how to make your background white and change the font color!
Hey Rino. First things first, I just started learning WordPress and I'm so glad I found your channel. Now things are a hell lot easier. Keep YouTub-ing. LOL, if that's even a word !! One more issue that I faced is after adding this header template to my entire site, I cannot edit my pages' top sections individually because it falls below the sticky header. Would be nice if you could help. :)
Love the tutorial, was needing to update my header and love this styling. An idea for a future video if its something that is possible in Elementor, is when you scroll down instead of the logo getting smaller it changes into a different logo. For instance, my logo transforming into a different version where it uses just my initials, essentially a completely new image
Or when you need the logo to change colours after scrolling! I just posted the same question. Haha
I am no expert, but perhaps this might help:
css-tricks.com/replace-the-image-in-an-img-with-css/
Since he added the condition of 100px, it should not happen until you scroll.
Absolutely sensational! Truly helped me! Already a fan!
Thank you, all this little tricks for elementor are such a big help.
Very awesome video. I learnt alot because it solved an issue i was facing.
Good video. However, for those who don't want to write code in CSS, the "Sticky Header Effects" plugin that integrates directly into Elementor does a great job. It's also useful for those using basic Elementor (not PRO). It has one more very nice feature: it can make the background transparent with a "blur" effect, which is very nice (the background blurs slightly).
can it change the similar to this from transparent to faded during scroll down?
Thank you so much, this helped me make the sticky look much nicer. Oh yeah, I subscribed already.
absolutely brilliant. you rock, your video rocks and your whole channel rocks. thanks a million.
Rino you always help me
Thanks from Pakistan ❤️❤️🇵🇰🇵🇰🇵🇰
Echt een legende jij, ik heb speciaal een account aangemaakt om te zeggen dat je door moet gaan met wat je doet
This has been very useful.
Thank you very much.
This was very easy to follow, thanks man! 👌
im new to the channel, i like your vids! a lot of helpful tips :)
You're videos are amazing! Super nice, thank you!
You are a gift. I appreciate you. Thank you.
Thank you for showing how easy it is to create a custom header using theme builder. 5 stars from me :)
Thank you so much. You are so sweet to teach and easily catchable. Thank You, it Helps me A lot to solve my issue & of course Best wishes from My Heart.
Rino, you're freaking amazing!!! I love your channel. You make me feel like I can do these things and actually make an income at it!!! Thank you!!!
Oh man, I'm the 666th comment!!!! WOOT. Hey your video was extremely helpful and valuable to me. It was so easy to understand and implement and I really appreciate it. I've subscribed. 💯
Great video, I can't wait to start using this on new projects! This really helped out. Looking forward to that logo in dashboard/login in future video. Keep up good content :)
Rino, I love this tutorial. Your teaching methods are so easy to understand. Question: is it possible to add a second row to the header? I want to add the Social Icons , a "Join" button" and a search bar above the navigation.
Thabk you! And yes, that is possible. Just add another container and put some widgets in there. It will also display on your website
You are really the best! Great video! I have so much fun working on my website with your tutorials. Wihout them I would be lost :)
great trick, your video guideline solve my problem.
You are such a great teacher, Thank you for all your help 😘
Thank you so much for solving my header problem. :)
Hey there. Your video was awesome. Really well done. It gave me confidence. Well, I ran into a problem. Everything is working except the background of my header is white rather than transparent. When I scroll to the Effect Offset point, then the background changes and the header sticks, etc. All good expect the starting point where the Header has a white background. I've gone over the settings multiple times and believe I'm following your advice. I'm hoping you've heard this before from people like me and can recommend a quick fix. I have used Elementor off and on for 4 years now. My skill level is intermediate. Thanks for the great video. I know this is on my end and hoping you can help.
Hi Kevin, I have the same issue. May I know how you fixed it?
@@karlal9609 I was unable to fix the issue. I bailed on the approach and went with a simple Sticky Header without the additional features.
You have a great easy and simple way to explain tutorials. Keep up the good work. I've seen a lot of tutorials and yours are so easy and simple to follow. Thanks a lot
Thank you so much!! You solved my major problem.
You are the best, simple and awswan!
Problem - when i update in elementor everything looks fine, but when i check on site its not animating the background of header. Its not shrinking as it is in elementor.
*Excellent! * Thank you! Just what I needed as I continue a site redesign.
This was very informative and you really have a good tutoring vibe. Much Appreciated. Subscribed.
Great video. It was exactly what I was looking for. I wish there was some clarity about the yellow triangles I get in the CSS code though it still works!