How to create a Transparent Sticky Header in WordPress with Elementor

[@nareknajaryan4496]

Your teaching skills + Custom CSS Tricks = Perfect tutorials. So please, more CSS tutorials with elementor pro.

[@master_coaching]

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 😊

[@rinodeboer]

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/

[@bryldavin2003]

You should post more videos! I love how the way you explain! so easy to follow your instructions!

[@dmitriystoyanov1571]

not work now

[@DougDtech]

Instead of shrinking the logo can I shrink the whole navigation bar? It looks like your bar adjusts size at 6:08.

[@mhemon1408]

Brother, the shrinking effect doesnit working

[@boldathletics]

Hello, Im still having a hard time with the icon striking to a certain size.

[@ladybeatleee]

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 :)

[@karishyung-inkim7881]

Totally agreed

[@Garthux]

This menu automatically upgraded my website, it looks so much more professional thank you very much!

[@PatrickLiljebeck]

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.

[@realmaxtovar]

You are the one amongst a lot of youtubers who actually makes it super simple and easy. Thanks!

[@Environmental-Tech]

You are the GOAT Rino🙌. Here in 2024 and your tutorials are always helpful. Thank you!

[@kandidat11]

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

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.

[@alanlim8862]

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.

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. :)

[@FiverrSkill]

Rino, I really love the way you teach. You are the best! Wishing you one million Views in advance.

[@DeltaYD]

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!!!

[@RobinVerser]

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!

[@lucreceaugusma7656]

Best channel on Elementor hands down! Keep up the good work.

[@hridoybiswas3425]

I don't know how to say thank you. I set this to my portfolio. And it works perfectly. Thank you once again

[@baliflorent6971]

Big Boss. Thanks for this tutorial. My best teacher on KZbin

[@lumaejuno2031]

Hey there! I´m a lawyer from Brazil and just want to thank you, pretty much!!!

[@barbaramichelvillegasalmei7263]

Bro! Seriously, Love you!!!! I´ve been searching a lot to do this with a smooth transition and I finally do it!!! Thank U!!!!

[@markbrowne181]

Thank you once again for this outstanding no nonsense content. You're number one fan in Ireland.

[@davidwalls2304]

Rino, I like this approach more than having an additional plugin for sticky header effects. Thanks!

[@camillebourdier4000]

Been on KZbin 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 !

[@isntlifebetter]

Wow! I usually don't like any videos with code but you made this seemless and easy! works perfect on my site. Thank youuuu!!!

[@gilanganggriawan7634]

I'm from Indonesia, and Thank you so much for all the really helpful tutorial!!!

[@fredriksjunnesson9539]

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.

[@Netunium]

Now THAT is a unique content. Amazing how we have everything on KZbin and nothing at the same time. Congratz for making the KZbin have everything

[@williamreymundo7082]

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.

[@petrastejskalova2421]

Super simple tutorial, thanks. Question: if I wanted it to work on the site Title as well? What to edit.

[@JoseRamirez-yi9hk]

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!

[@joseluismartinez2353]

Me llamo Jose soy de Venezuela agradezco mucho tus tutoriales amigo.

[@zhamilyanishanova3680]

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.

[@rinodeboer]

Thanks for this huge compliment! Makes my day 🎉

[@badarshahbaz4340]

Thanks man. You are helping a lot of us for free of cost.

[@agdistributor4137]

King of Elementor. Thanks

[@Unkgraphics]

Thank you! I've been watching other videos / reading tutorials and this is the first one that works perfectly without any buggy scrolling effects

[@Am_ro12]

I love this channel - just purchased the xd web design tutorial - definitely worth it! Thank you!

[@lianabagui]

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! ♥

[@jackzheng3236]

Fannnntastic sharing! I learnt it all by your tutorial in just 30 mins! will surely follow this channel onwards!

[@theprodator9809]

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.

[@3mediastudiodesign]

Amazing, fast and clear ... this is a milestone. Good job Rino !!!!

[@fernandoalmeida2373]

Hi Rino, just want to say thank you. Your videos are amazing. Keep up the excellent work!

[@sugarmama_bakehouse]

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. :)

[@genemoore1]

Thank you Rino. Fantastic job. I'm still amazed that Elementor has not added this functionality, considering how popular transparent headers have become.

[@ILAGJ]

Dear Rino, any idea why the transission of shrinking should not work if I add to the header with logo and menu also an icon and a shooping cart? does that have an impact...? funnily in the theme builder it works well , showing shrinking after 100 px offset but not on the front end. but it did on the front end before adding icon and shopping cart...

[@mendozagar]

Hi Rino, Thank you for this amazing tutorial. I was wondering if there's any way to change the color of the text menu while you're scrolling down. I mean like from white to black while the sticky header change the background color

[@robset1518]

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. :)

[@StreamlineRoofingTx]

Great Video. I think your speed of instruction was great.

[@guyneeman]

I think that you are the best explainer of elementor

[@choupiwenfly]

这教程真是好，解决了我的大问题，研究了2晚上也没研究出来。

[@RafaelFerrazCarpi]

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

[@ytamateur7146]

Best explains tutorial ever.... Many thanks Bro... You are Brilliant...

[@andreainks1430]

Thank you for this video! I couldn't get the Astra Brainforce guys to help me! You made it simple!

[@CurtisHays]

Awesome tutorial, where have you been in my life for the past 2 years. I'm subscribed now, keep putting out great tutorials.

[@projectafweb2701]

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 !

[@jaimethornton]

Thank you so much, Rino!!! great tutorial and code, much appreciated!!!

[@alexbucklandphoto]

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

[@hy.c5576]

Or when you need the logo to change colours after scrolling! I just posted the same question. Haha

[@tombarrettart]

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.

[@lubos1207]

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).

[@daves1778]

can it change the similar to this from transparent to faded during scroll down?

[@AP-vl2wb]

Thanks for your informative videos. Is the transparency possible without Elementor? Possible in the Pro Theme?

[@lonshapiro3718]

Great video. Thanks for doing the research to get this code to all us non-programmers.

[@huyentrinhthanh104]

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!

[@kevinmccaughey5436]

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.

[@karlal9609]

Hi Kevin, I have the same issue. May I know how you fixed it?

[@kevinmccaughey5436]

@@karlal9609 I was unable to fix the issue. I bailed on the approach and went with a simple Sticky Header without the additional features.

[@kstampo]

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!

[@highsite]

Exactly!

[@flashybolt1912]

Dude saved me hours of research. Love you bro, no homo.

[@hy.c5576]

If I have a transparent header menu on a dark header image and therefore my logo is white, and I want to apply the sticky effect and turn the background colour of my header menu to white, how do I then switch my logo from white to a dark colour? I watched your tutorial on using the Elementor dynamic colour feature to switch logos for different pages, but in this case it would be on the same page (e.g. homepage). Do you have any advice on how to do that? Finding your videos has helped so much! Thanks for the awesome work.

[@NarasimhaB]

I code does not work. What did I do wrong?

[@FirebrandVOCALS]

This blows me away ... Your one very talented dude! Cheers for this man 😎

[@ryancochrane5851]

Thank you for the video! Is it possible to change the color of the sticky header?

[@dandunham1750]

This works great. How would we make it work if the header were larger than 90px? I have a 230px high menu that needs to shrink on scroll.

[@antalya0759]

Hi Rino, awesome video. I followed every step exactly like you explained but the menu does not become smaller when scrolling down. I've checked over and over again but can't seem to find the culprit. What could be the problem? Anyway, thanks a lot!

[@DavidHeckel]

I have the same issue. Everything else works great but the container doesn't shrink. Not sure what we are missing?

[@socialwithdiogo]

@@DavidHeckel me too. The container doesn't shrink. Can you help Rino?

[@monicamltan]

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.

[@sahar.crafts]

hi there. Thanks for your time and effort to share this with us! i did everything exactly like you did, but i don't get the transparent header. when i add the custom css the header gets the bg color for always and not just at scroll. what you think is the issue? thanks

[@denniszenanywhere]

It would be interesting to see how you manage to work around the mobile and tablet layouts after doing desktop layout, as I find that my desktop layout may be nice but the tablet and mobile versions are all over the place. What's your system? I find that I am spending more time doing double time with the tablet and mobile versions, because the guides can be unresponsive when everything is bunched up together.

[@VolaconCarmen]

Thank you so much for such a great content. I am watching all of your videos.

[@mohamedelkomy5524]

Really very nice desgin and your way of you tube is very nice But what about the site speed ?? I used with astra befire and elementor pro and it very slow specially on mob version and after optimizes photo and required speed blugin ?? What the average for professional site speed you did before ?

[@louisdaza1923]

Thank you, all this little tricks for elementor are such a big help.

[@erun6476]

it was great many thanks, if i need to rotate the logo 180 degree when scrouling down what code shall i use

[@WebcreateSite]

Robiłem to dosłownie 3 lata temu i mi się zapomniało. Znakomity video :D pozdrawiam od WebCreateSite

[@CarlosHdeTejada]

This was very easy to follow, thanks man! 👌

[@farukkzlck1327]

Your teaching skills are very well

[@likashimazu421]

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!

[@TomsCoffeeCorner]

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?

[@moslemayasmin8949]

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.

[@adictivedesign]

Hey! That is such a great way! Thanks a lot. A tip from me and a question as well: Question: How do I shrink the menu too and for example social icons? With a class and copy paste the logo css , changig the class name and deleting img it wont work.. Tip: use the frosted glass effect, this makes it even greater!

[@nuranismohdnor2638]

You're so awesome and u explain everything very clearly!! you get a new fan now :DDD

[@jocelynpatrick2823]

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!

[@GJKUZ]

Thank you for showing how easy it is to create a custom header using theme builder. 5 stars from me :)

[@steffievanmoorsel1389]

Bedankt Rino ik heb deze tutorial al zo vaak bekeken en gebruikt op verschillende websites. Maar toch nog 1 vraagje. Bij mobiel heb ik een probleempje. Het dropdown menu komt goed uit wanneer je nog bovenaan de pagina staat. Maar wanneer je scrolt wordt de header kleiner en dus zit er ruimte tussen de header en het dropdown menu. Heb je hier toevallig ooit zelf een oplossing voor gevonden?

[@randeepsingh3144]

Hi Rino, Will this work on pro 3. Please advise. Also, can you can create header with dropdown menu that doesn't cover the background. That will be extremely helpful. Keep up the good work.

[@dzomi]

Everything is clear and to the point with the right amount of explanation. Your content is amazing, thank you!

[@luis_Pi]

good, thanks for your videos, can you make the menu text change color when you scroll?

[@juliochavez7260]

Great tut!!! I wandering if there a way to change menu items links color when scrolling?

[@alittlemoreoutdoor]

Great video, could you help me with a bit of troubleshooting? I set the 90px min-height and -90px margin as per the video. I still end up with about 20px margin between my content and my page which looks odd with the transparent background. I've looked around for places I may have accidentally put a margin or padding in but I can't see anything.

[@גיאאביזמיל]

thank you! if i'm want to use a gradient in the background? how i do that?

[@ellensalomonsen7465]

You are such a great teacher, Thank you for all your help 😘

[@juanpablomateusjimenez2624]

Great tutorial!!! thanks so much. I was wondering if the text color of the menu can change also when scrolling, is it possible?

[@ritac.4523]

The best video on this subject ! Thanks for this amazing tutorial :)

[@sertansahbaz8537]

Echt een legende jij, ik heb speciaal een account aangemaakt om te zeggen dat je door moet gaan met wat je doet

[@serro7267]

You are amazing man. I just got one question. Is it possible for me to do this on my shopify store to?

[@지금이야라면]

thanks vidio . If I do this, do I really need Elementor Pro?

[@mariano-cucinotta]

Hi, thanks for the great video. I have a problem with resizing the logo, let me explain: you use an image while I inserted the SiteLogo widget maybe that's why it doesn't work? Thanks again

[@soheil6114]

Super helpful and informative! Thanks. Keep it up ✨️🔥

[@malabawikileaks4892]

Very awesome video. I learnt alot because it solved an issue i was facing.