How To Make a Logo Shrink in Elementor's Sticky Header

[@LytboxStudio]

🔥Here are CSS and the link to get Elementor Pro (I am an affiliate and appreciate your support 😊) elementor.com/pricing/?ref=4977&campaign=yt 👨‍💻Here is the CSS to copy and paste: /*-- SHRINKING LOGO --*/ /*-- New class when sticky is turned on 'elementor-sticky--effects' --*/ /*-- give the logo image a class called 'sticky-logo' --*/ .elementor-sticky--effects .sticky-logo img { width: 120px!important;/*-- edit the pixels to change to desired shrinking size --*/ } .sticky-logo img { transition: .5s all ease-in-out; } @media screen and (max-width: 767px) { .elementor-sticky--effects .sticky-logo img { width: 90px!important;/*-- edit the pixels to change to desired shrinking size for mobile --*/ } }

[@clementyo4526]

woow it works inspirasiwebsite.com/ ^^ but on mobile is not as smooth as desktop. any tips? ^^

[@LytboxStudio]

@@clementyo4526 for Mobile I would use only a slight shrink effect. Maybe just 20-30 pixels to make it smoother.

[@clementyo4526]

@@LytboxStudio okay thanks. I will try 🙏😁

[@angelahunt5026]

2024 and still works like a charm, saved me a ton of time! Thank you!

[@LytboxStudio]

That’s great to hear! I’ve done some updates making sure it’s still good with the latest version of Elementor 😉

[@NataliaYockelle]

Hello, thanks great tutorial! Question: what might be the reason my my logo is shrinking on page load, instead after scroll?

[@RafaJurkowski]

Hello from 2023 - still works fine! Thank You!

[@HuubVile]

Hello! Thank you for this great tutorial. It worked perfectly last time. However, I've had to redo the header and now I don't get the transition to work. What could be the issue?

[@scottpickering8017]

GREAT VIDEO!!! Your instructions are easy to follow and it worked for me on the first try. Thank You.

[@LytboxStudio]

Glad it helped! Many Thanks 🙏💜

[@mtnpfi]

Hi Jeffrey, thanks a lot for this. It works great on desktop/tablet but strangely not on mobile - do you have any idea why this could be? The logo is set to px! Thx : )

[@LytboxStudio]

You might need some adjustments for mobile. All sites are different and some need a few tweaks

[@derleuchtturmwarter5866]

Perfectly explained! Thank you so much!

[@LytboxStudio]

You're very welcome! And big thanks! 🙏

[@THEOLDCARSHOW]

Great teacher thanks for your info

[@RiccardoLopez]

Hi! i would like my entire section to get smaller when the logo shrinks (just like in your video) but i can't achieve that..i followed every step of your tutorial. Thank you so much!

[@LytboxStudio]

I do plan on making a fully shrinking menu. I will have that out very soon!

[@vafixer8885]

Hey man, just want to say your content is the best on elementor right now, I always keep coming back to a few of your videos and I notice my general skill even knowledge of css has improved just by seeing how everything works together, thanks for all you do I hope you do well.

[@LytboxStudio]

Wow I really appreciate that! Many thanks! 🙏

[@Am_ro12]

Completely agree - Jeffrey is killing it!

[@davidescardo6065]

Hi. Great tutorial, it works very well. However, when you scroll up and the header grows again, a white gap always appears between the header and the next Section/Container, because the growth is not fast enough. Is there a way to avoid that white gap without having to accelerate the transition and lose the smoothness? If not, is there a way to make the header shrink when scrolling down, and not grow again when scrolling up, that is, to make it stay shrunk? Thanks!

[@davidescardo6065]

Clarification: You don't notice the problem when the section/container following the header has a white background. You notice it if the background of the section/container is coloured or has a background image.

[@virginiaciancia]

U r the best bro! blessings from Argentina ♥

[@laurenkay1104]

Super helpful. Thanks Jeff!

[@LytboxStudio]

Lauren Kay thanks!

[@original-music]

Great video. Did you post the css code? Cant find it.

[@LytboxStudio]

Thanks! And yes you can find the CSS in the top comment pinned to the top

[@mattharris8622]

Thank you, great tutorial!

[@LytboxStudio]

Thanks Matt! I appreciate this

[@declanc5726]

That is brilliant, thanks. I didn't think I would get it to work but I did. It's made such a difference as I really wanted to be able to shrink it.

[@LytboxStudio]

That’s great! I am glad to hear you got it to work.

[@rubenvanbochove589]

He great tutorial! The transition time doesn't work, any suggestion?

[@LytboxStudio]

There has been some logos not transitioning. I have been meaning to add a fix to this. Can you share your link and I can take a quick look and see why

[@imagesin3604]

Fantastic, please keep em coming.

[@LytboxStudio]

Thanks, will do!

[@lucaszinner7992]

Excellent tutorial, ideal for beginners

[@LytboxStudio]

Lucas Zinner thanks mate!

[@andonisr]

Just saw this video too (asked if you could make it in your other video with the 2 headers). But, where is the css? I wrote it by hand:-)

[@LytboxStudio]

It’s pinned in the top comment

[@mohamadkarim9337]

Hello, I hope you are well. I have a question. In Elementor, is it possible to give animation to an element (preferably of image type) that has animation without hovering once every few seconds? I searched a lot, but finally, I found you to be the solution to my problem. Much love.

[@JoeGator23]

Keep up the great work... great presentation for those that want to learn.

[@LytboxStudio]

Sorry I missed your comment. It slipped by me. Much thanks!🙏

[@JoeGator23]

@@LytboxStudio Great channel and content... Keep up the good work and happy holidays to you! :)

[@tamarbrown4804]

Great video! Clear instructions, and to the point! Thanks for sharing.

[@LytboxStudio]

Thanks!🙏

[@laurianehaydari1399]

Hi ! Thank you so much for this tutorial. Unfortunatly, this is not working on my website.. I did copy and paste your code and followed all the giving steps but it doesn't change anything. Can you help me please ?

[@LytboxStudio]

Sure can you share a link to your website and I can take a look. You can share here or DM me on Instagram here - instagram.com/lytbox_co/

[@hannaaverkamp-peters8950]

Duuude, thx!! I was looking for an answer to my issue for about 3 h :D so happy I found your vid.

[@LytboxStudio]

Glad to hear it!

[@Kipcab]

Great stuff. Is it possible to transition the logo & background into a different colour (like your other tutorial) but also shrink too?

[@LytboxStudio]

It’s definitely possible. You can combine the different sticky effects from both videos

[@leomostaza]

Great and Simple solution

[@LytboxStudio]

Thanks!

[@denissafronov924]

Thank you!

[@LytboxStudio]

Your welcome 🙏

[@MrNoScore23]

Such a good mentor! The Video well explained, easy to understand. Thanks for sharing this beautiful trick. I was about to join your group but, unfortunately the group is not available. Is there any way just to join your group to improve our skills?

[@LytboxStudio]

Try this link to our group - facebook.com/groups/buildwithelementor If you are having trouble getting in, message me on Facebook - facebook.com/lytbox

[@kumarharshvardhan9785]

It worked fine. Thank you

[@LytboxStudio]

That's great to hear. Thanks!

[@xBartyIL]

If i dont want to use PX and use PERCENTAGE instead, how do i do that?

[@LytboxStudio]

You would just need to adjust the CSS. But I would always suggest to use PX for the logo size and adjust for different device sizes. It gives more control on how the logo will appear.

[@designsosimple2269]

Great vids bud. I love the way you explain how each bit of the CSS works, so we can learn what changes what, rather than blindly copy and pasting. So I was wondering having seen your swap logo video also how I could use both of these to affect a swap of the full logo to the logo icon only and at the same time do a smooth shrink on scroll? For example, if I had the Nike logotype 'with the swoosh', but when I scroll, I was just left with a smaller version of the swoosh icon only (without Nike type) in the sticky header. Any thoughts if it's not too much trouble, how we could make these two videos work together? TIA

[@LytboxStudio]

That's a really good idea and is actually one of my next videos. I am working on it now and should be out in a couple weeks. I am making a video to combine all effects and make a fully shrinking navbar including full logo changing to the logo mark. I had this video on my list and your comment pushed it to the top! I'll have it out soon

[@designsosimple2269]

@@LytboxStudio thank you bud, can't wait, hopefully soon please 🙏

[@sonpy68stella]

Thank you so much!! Your tutorial is simple and clear. It helped me a lot!

[@LytboxStudio]

I’s so glad to hear it helped!

[@shahzadhaider9195]

Another great video.

[@LytboxStudio]

Thanks mate! 🙏

[@diagosa]

Thanks so much man, it's worked ;)

[@LytboxStudio]

Great! Glad too hear

[@ryansaving6576]

Great content......!....very helpful.....! thanks mate

[@LytboxStudio]

Thanks mate!

[@srjorge92]

very good tips, I have a query hopefully you can help me ... by making my image smaller it gets pixelated a lot .. it is in .png format and it is made to the initial size that will be in the header .. any advice?

[@LytboxStudio]

jorge morales PNGs are not the best format for logos. They’re usually blurry and have large file sizes. Usually the only way to give them high resolution is to make their size very large which isnt a good solution. If you can, try to have your logo remade as an SVG that would be the best solution. With AI this can be done easily.

[@srjorge92]

@@LytboxStudio thanks for your help!!

[@larsbrofgunordgrafisk2271]

thanks for a great video :-) Is there any way to make this work the same way with a text instead of a image?

[@LytboxStudio]

Yes you can! You'd need to do some minor adjustments to the CSS

[@EdoardoResta]

thank you so much

[@stephanieclark9049]

I'm having a hard time combining this effect with your last tutorial of changing the logo color on scroll. I tried adding both class id to the d-logo but it only sort of works, meaning the logo still changes to the d-logo and it does get smaller but the menu doesn't decrease in height along with it and the size decrease acts like there's not timing in the code. Any help would be so appreciated!

[@stephanieclark9049]

It seem whichever dose come first int he CSS, the effect takes precedent

[@LytboxStudio]

Hey Stephanie, I responded to your other comment. Let me know if you were able to fix it or could still use help with it. Thanks

[@biguiz64]

Thanks, very helpfull !

[@LytboxStudio]

Thanks! I appreciate it 🙏

[@naheedakhanam8608]

Love this thanks for sharing.. :)

[@LytboxStudio]

You are so welcome!

[@andrestachiz5768]

Hello, it seems to be shrinking the logo immediatly and not when I scroll down, what am I doing wrong? Thanks.

[@LytboxStudio]

what did you set in the 'Effects Offset'?

[@leandrolabrana6254]

Hi! Thanks for your video it was really helpful. I've got a question for you, what if I'd like to make the entire navigation nav to shrink?. I've been trying out for a week and I can't make it shrink! LOL . Cheers!

[@LytboxStudio]

To shrink the whole header you can shrink the section padding using the same technique. Try setting the section padding top and bottom to 10px and adding this CSS snippet - .elementor-sticky-effects { padding-top: 6px!important; padding-bottom: 6px!important; } You can play with the padding top and bottom pixels to adjust to how much shrink. Let me know if this works

[@leandrolabrana6254]

@@LytboxStudio Thank you so much!! I'll try that!. Greetings from Argentina!.

[@peadly4328]

@@LytboxStudio how can i ease this transition ? cant find, thanks buddy

[@randydims4766]

Great, thank you !

[@LytboxStudio]

Thanks! 🙏

[@ahylinalmonte5312]

Hi, I have followed all the steps and only the logo seems to shrink, the nav bar doesnt, has something changed or its just me I havent followed the steps correctly? Thank you very much for the tutorial btw

[@LytboxStudio]

Hey, you’re correct, only the logo shrinks, not the whole navbar. You would need to apply the same technique to the section padding to make the whole navbar shrink. I am about to make a new video on this showing how to shrink the the entire navbar since it has come up a few time. It’s on my list and should be out in less than 2 weeks.

[@LytboxStudio]

Check where adding the top and bottom padding. I only apply padding to the section and not any of the elements inside to the section like the menu and logo. Try removing padding from everything and then only apply to the section. There should be more of an overall shrinking effect when the logo shrinks

[@ahylinalmonte5312]

@@LytboxStudio okay thank you very much, really appreciate the help. Keep up with the tutorials, probably the best I have been able to find on youtube.

[@ahylinalmonte5312]

@@LytboxStudio btw, another great tutorial I havent been able to find yet for elementor is changing the nav bar animation, right now with elemetor pro I believe you can only put a small underline under the text of the menu but in some cases it wont be smooth enough. The ultimate addons for elementor I think there is an addon which is used to change this but it would be great if it could be done with CSS without any need of external plugins.

[@ahylinalmonte5312]

@@LytboxStudio Best tutorial by far would be change logo + shrink logo + change header color + shrink header.

[@luisant.delgadocarrasco9201]

Muchas Gracias, me ayudó mucho este tips, saludos desde Perú

[@LytboxStudio]

Sorry I missed your comment. It slipped by me. So glad it helped. Alright Peru!

[@florenciavanmeegroot5172]

Hello. I have managed to change the logo with css including the content url, the problem is that the logo for example with the sticky effect stops having the click function. Do you know how to make it continue to have the function of clicking it and taking you to the home of the site?

[@SB-cy2hv]

I have the same problem. Does anyone have a solution?

[@LytboxStudio]

Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? Both logos should have the link set. And if it's still not working, then it's probably the z-index that needs to be checked. Let me know if you got it working or could use some help. Cheers!

[@peadly4328]

Have only my logo shrinking, how can i shrink all the header ? thanks

[@Mr.MajesticAnime]

Sir. How did you do on only Logo Shrinking and how header are Fixed position?? can i know?

[@LytboxStudio]

Hey Peadly, I am currently working on another video that combines all the effects I used including shrinking everything in the header. Gove me a week or two and I'll have it posted

[@LytboxStudio]

@@Mr.MajesticAnime this video shows how to do that if followed step by step. Is there a reason it is not working for you?

[@hg393]

Damn I was expect 746k subs, not just 746. You're doing amazing!

[@LytboxStudio]

Haha thanks!

[@papayawebmedia]

Great vide but... Sorry, I miss something? Where is de CSS code? Thk.

[@LytboxStudio]

Thanks. The CSS is in the comments pinned to the top

[@clementyo4526]

I want to be friend too 😁 I was almost panic when heard CSS 😅 but it is gone when you showed me that was easy 😁👍 thanks man

[@LytboxStudio]

No problem 😊

[@Mr.MajesticAnime]

Sir Can you tech me mw how to do logo only are Shrinking and header are fixed?

[@LytboxStudio]

Where you able to make your logo shrink on scroll using this video? It should show step by step. By using Elemetor sticky top, it will make the header fixed. Let me know if this works for you. And if not give me more details. Thanks

[@Mr.MajesticAnime]

@@LytboxStudio Hello sir just like this website. their logo are Shrinking. www.kappaalphaorder.org/

[@LytboxStudio]

@@Mr.MajesticAnime I see. This video tutorial shows how to do this exact effect as the example website you sent with Elementor pro. Were you able to follow the tutorial? Did it work for you once you followed the tutorial step by step?

[@remyas7853]

thanks

[@LytboxStudio]

Many Thanks 🙏💜

[@debjeetm4199]

Brilliant.. love from Incredible India...subbed. now commented also..haha

[@LytboxStudio]

Many Thanks 🙏💜

[@bySterling]

Awesome!

[@LytboxStudio]

Thanks!

[@LytboxStudio]

Sorry I missed your comment. It slipped by me. Were you able to figure it out? If not, let me know and share a link., i'll check it out

[@roxanadegiovanni]

Genial! Thank you very much!

[@LytboxStudio]

Thanks! I appreciate it 🙏

[@brianschnurr3254]

Subscribed!

[@LytboxStudio]

Awesome thanks!

[@leaf_fan_b3829]

How can you add logo to navbar only when its scrolling down ?

[@LytboxStudio]

This can be done by giving your logo a class such as my-logo and then hide the logo with CSS. It should look something like - .my-logo img { display: none;} after add the CSS .elementor-sticky-effects .my-logo img { display: inline-block!important; } And make sure to set up the sticky in the Elementor settings for the section like in the video. Let me know if this works.

[@leaf_fan_b3829]

@@LytboxStudio i got to hide but when i add elementor-sticky-effects my logo { display: inline-block!important; } it shows up again even when not scrolling what did i do wrong

[@LytboxStudio]

@@leaf_fan_b3829 can you share a link?

[@leaf_fan_b3829]

@@LytboxStudio i did this in the sticking narv bar css .elementor-sticky--effects .sticky-logo img { width: 120px!important;/*-- edit the pixels to change to desired shrinking size --*/ } .sticky-logo img { transition: .5s all ease-in-out; } @media screen and (max-width: 767px) { .elementor-sticky--effects .sticky-logo img { width: 90px!important;/*-- edit the pixels to change to desired shrinking size for mobile --*/ } } .my-logo img{ display: inline-block !important; }

[@mmb811]

does not work in combination with woocommerce single product variation. To Replicate: Add a product with variant (eg shoe size) to woocommerce go to that product's single product screen Scroll just enough until the shrink effect on header kicks in Now select a different shoe size from the drop down Once selected, the single product image will jump, and now when you scroll back up, it will not scroll all the way up, until you re-select a different shoe size from the drop down/or/refresh the page. It seems that when the shrink effect kicks in, woocommerce does not realize that header is narrow, and incorrectly calculates page height

[@LytboxStudio]

Thanks for reporting this. Of course there are unforseen factors and this helps. Did you find a fix? And if not, you can share a link with me and I can help find a fix.

[@mmb811]

@@LytboxStudio On my ticket, the devs have reported that this has now been fixed in the latest update

[@LytboxStudio]

@@mmb811 glad to hear!

[@NorlynCodes]

Hey! I think if you'll teach coding, you'll do a very good job. Thank you for this video!

[@LytboxStudio]

Hey thanks! I appreciate that 🙏

[@kikopobla]

Thanks x10000

[@LytboxStudio]

Your welcome!xs100000000

[@xBartyIL]

i followed step by step and nothing works. cant understand why ....

[@LytboxStudio]

Can you share a link?

[@qurbanali6083]

css not found

[@LytboxStudio]

It’s in the comment pinned to the top

[@nooster125]

good luck if you're using crockoblocks :( great video tho!

[@LytboxStudio]

What issue do you face with CB? And which CB plug-in? Would be great to know. I’m currently making an updated version and I’d want to make sure it’s compatible with Croco

[@nooster125]

@@LytboxStudio im just using the jet elements plugin and jet menu buuut I found a solution and its even easier than elementor here it is: Just add a class to the logo image and paste this code in to css: .jet-sticky-section--stuck .logo{ width:150px!important; transition: width .7s ease; } that did the trick for me!

[@rongdong1914]

thanks

[@LytboxStudio]

You got it!