How to create a Transparent Sticky Header in WordPress with Elementor
Vložit
- čas přidán 2. 07. 2024
- In this video I will show you how to create a Transparent Header in Elementor with just a few clicks.
Videos that I refer to in the video:
Header Tutorial Elementor Pro: • How to create a Transp...
Elementor Pro Basics for beginners: • Elementor Pro Wordpres...
Wordpress Basics for beginners: • Wordpress Tutorial 202...
Click here for the code: livingwithpixels.com/resource...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it. - Jak na to + styl
![Free Elementor Sticky Transparent Header Tutorial. [Sticky Header On Scroll Effects] No CSS, No BS😜](http://i.ytimg.com/vi/-fMpH_aKRcI/mqdefault.jpg)
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
You are the one amongst a lot of youtubers who actually makes it super simple and easy. Thanks!
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!
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 😊
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.
This menu automatically upgraded my website, it looks so much more professional thank you very much!
Thank you! I've been watching other videos / reading tutorials and this is the first one that works perfectly without any buggy scrolling effects
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 🎉
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
You are the GOAT Rino🙌. Here in 2024 and your tutorials are always helpful. Thank you!
Everything is clear and to the point with the right amount of explanation. Your content is amazing, thank you!
Rino, I like this approach more than having an additional plugin for sticky header effects. Thanks!
Finally the tutorial I was looking for, exactly what I wanted to do with my WP site. Very detailed and informative. Thank you so much!
Now THAT is a unique content. Amazing how we have everything on CZcams and nothing at the same time. Congratz for making the CZcams have everything
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!!!
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.
Amazing, fast and clear ... this is a milestone. Good job Rino !!!!
Bro! Seriously, Love you!!!! I´ve been searching a lot to do this with a smooth transition and I finally do it!!! Thank U!!!!
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.
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!
Rino, I really love the way you teach. You are the best! Wishing you one million Views in advance.
I don't know how to say thank you. I set this to my portfolio. And it works perfectly. Thank you once again
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!
Thank you once again for this outstanding no nonsense content. You're number one fan in Ireland.
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 Rino. Fantastic job. I'm still amazed that Elementor has not added this functionality, considering how popular transparent headers have become.
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!
Hey mate,
great content and help as usual :)
It helped me a lot to understand a little more about the standard elementor menu.
I've never worked with this widget before, I always used more complex custom menu plugins.
As I see now, it will help me to build my easier and more image based websites.
Thanks for your tutorial, and have a great week ahead!
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.
Best channel on Elementor hands down! Keep up the good work.
I love this channel - just purchased the xd web design tutorial - definitely worth it! Thank you!
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 :)
Hi Rino,
just want to say thank you. Your videos are amazing.
Keep up the excellent work!
Rino. I LOVE YOU!
That´s exactly what I was looking for.
Thank you so much! Strait to the point! My log header is now complete! 😍
*Excellent! * Thank you! Just what I needed as I continue a site redesign.
Thanks man. You are helping a lot of us for free of cost.
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!!!
Thank you, all this little tricks for elementor are such a big help.
Been on CZcams 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 !
Big Boss. Thanks for this tutorial. My best teacher on CZcams
Great video. Thanks for doing the research to get this code to all us non-programmers.
This blows me away ... Your one very talented dude! Cheers for this man 😎
Awesome tutorial, where have you been in my life for the past 2 years. I'm subscribed now, keep putting out great tutorials.
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.
I'm from Indonesia, and Thank you so much for all the really helpful tutorial!!!
You're videos are amazing! Super nice, thank you!
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. :)
Yes!! Thanks Rino for your video! Going to use this one in my project👍👍
Thank you so much, Rino!!! great tutorial and code, much appreciated!!!
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!
Fannnntastic sharing! I learnt it all by your tutorial in just 30 mins! will surely follow this channel onwards!
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 for this video! I couldn't get the Astra Brainforce guys to help me! You made it simple!
Thank you for showing how easy it is to create a custom header using theme builder. 5 stars from me :)
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
Hey there! I´m a lawyer from Brazil and just want to thank you, pretty much!!!
King of Elementor. Thanks
This was very easy to follow, thanks man! 👌
This is exactly what I was looking for! THX
This was very informative and you really have a good tutoring vibe. Much Appreciated. Subscribed.
Thank you so much ❤ needed this for a long time..
You are simply the best. I LOVE IT!
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!
Thank you, Man, you made my day!
amazing! I'm from Brazil and yours videos that's incredible
Robiłem to dosłownie 3 lata temu i mi się zapomniało. Znakomity video :D pozdrawiam od WebCreateSite
absolutely brilliant. you rock, your video rocks and your whole channel rocks. thanks a million.
Thank you very much, your videos are eye-opening and teach a lot.
Thank you so much for your tutorial. One of the best!
You're so awesome and u explain everything very clearly!! you get a new fan now :DDD
You are such a great teacher, Thank you for all your help 😘
Wow great video I was trying to do something like this for my website but couldn’t work out how. Great tutorial
Love this whole design!
This tut is awesome thank you!
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.
Thank you very much for your great tutorials, it helps a lot.
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 :)
Me llamo Jose soy de Venezuela agradezco mucho tus tutoriales amigo.
Great and helpfull tutorial, simple step, no wasted time, no clickbait, Many Thanks!! ^_^
You explain things so well.
I LOVE YOUR CHANNEL AND THAT MAKES ME SUPPORT
Thank you so much for solving my header problem. :)
Super helpful and informative! Thanks. Keep it up ✨️🔥
Great Tutorial. Worked like a Charm 🙌
Amazing tutorial - simple and on point. Surely I will come back for more content. Keep it up! :)
im new to the channel, i like your vids! a lot of helpful tips :)
Nice ! a great tutorial as usual! Thanks for sharing that with us Rino!
Absolutely sensational! Truly helped me! Already a fan!
Helpfull tutorial. Thank you.
Good luck on your digital journey.
I love your videos. Thanks a lot!!!
Thank you so much, this helped me make the sticky look much nicer. Oh yeah, I subscribed already.
The best video on this subject ! Thanks for this amazing tutorial :)
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. :)
This has been very useful.
Thank you very much.
Nice, just came across your CZcams video for a work project I have and I thought his English is good but has an accent is he Dutch and yes you are :) I used to live in the Netherlands as well until last year!
Love the way you teach.
Such an awesome video and header style and one millions can benefit from! 🙌🏻⚡️💻📱💪🏻💥👏🏻
Thank you so much!! You solved my major problem.