A Fully Shrinking Sticky Header On Scroll With Elementor

[@LytboxStudio]

Hey everyone the link for the css has been fixed. You can find it here - lytboxacademy.com/shrinking-sticky-header-on-scroll-with-elementor/

[@antoniomaria2012]

Hi @Jeffrey. When I resize the window the header doesnt adjust to desktop.

[@websquadron]

Saved this video to my Fave List.

[@LytboxStudio]

Yo Imran! This means a lot coming from you mate! Cheers🍻

[@jessebelleman8070]

Quick tip for minute 12:10. You move the top margin of the section below the header, but you'll have to do this for every new page using this header. Therefore, if you want the header to be the same margin for all pages using this header automatically its better to move the bottom margin of the header template itself. This saved me time having to adjust the margin of every page that uses this header. You probably already figured this out, but might be helpful for new watchers. Anyways thanks for the video!

[@katezalewski1513]

Thank you soooo much! I had tried like four other tutorials and was pulling my hair out trying to get my header to shrink, this one finally worked. You rock.

[@LytboxStudio]

Nice! I’m happy it worked 😁

[@GameTacoFTW]

I'm having trouble getting this to work with a fluid container for some reason.

[@Am_ro12]

You're my favourite Elementor / Web Biz guy on the internet! Professional, practical, and I could listen to you all day! Thanks so much for all your help!

[@snazzy4854]

Thank you! This was the 5th or 6th one I watched and the only one that works properly with ability to customize the CSS for more control

[@kieransheldonkelleher9161]

Thanks mate. Really easy to follow and works without issue!

[@LytboxStudio]

🙏

[@diagosa]

I love this guy, also we look like each others. I learned he opened training website. luck be with you bro.

[@LytboxStudio]

Haha thanks mate!

[@shehankarunaratne7034]

Thank you so much for this video. I have been struggling for days until I came across this video.

[@buenachito2695]

Finally, somebody explain very very VERY simple :) thanks.

[@knowalternativetradingco.2545]

You are very helpful and kind. Thanks so much for the help and thoroughness. I learned how to do this header and also learned some other very helpful tricks and tips along the way. Thanks!

[@johnmclaughlin8877]

That's an outstanding tutorial. It worked a treat. Thank you.

[@LytboxStudio]

Thanks!

[@aminfotechsmc]

Thank You So Much I was struggling for that from long time but your video make it simple thank you very much

[@LytboxStudio]

So glad to hear! Thanks!

[@aminfotechsmc]

@@LytboxStudio Thank You very much for replying

[@hopewavemediaptyltd2248]

Thank you Jeffrey, excellent video as usual, you are an excellent teacher, I like how you share information, is very easy to follow, keep doing what you are doing

[@DanishTroll87]

mate you're the best. you deserve way more subs.

[@jyotibarasker2792]

Hi your videos are great but wants to know how we can create two different color section for hero section that has displayed in your demo can you please tell me how we can do it.

[@patricksuchy3212]

Love the videos man, everything works great but I have a question. When on my desktop if I make the window smaller and then go to full screen, the 'shrinker' navbar is broken and stays at the same width as it was. Is there a way to fix that?

[@alexgauvin]

I have the same issue and I'm banging my head on my screens how to fix that. Please post a fix for that, Thanks

[@katezalewski1513]

@@alexgauvin also having the same issue!

[@alexgauvin]

​@@katezalewski1513 you have to set width: 100%!important; to .shrinker. That will fix annoying issue

[@ADdictiveDGTL]

@@alexgauvin this worked. Thanks.

[@mnflrizki]

dude, you straight to the point and it's very useful👏

[@LytboxStudio]

So glad to hear!

[@NickRama86]

Another brilliant video!! Man you are literally the best Elementor KZbinr and I really appreciate your videos! 🙏🏻 👊🏼

[@LytboxStudio]

Wow, thanks! I really appreciate that 🙏

[@NickRama86]

@@LytboxStudio hey man thank you. Can I ask…all your videos are super helpful and I always learn a lot. But one thing I am struggling with is using elementors Mobile Menu Widget and adding additional buttons. Is that possible? Elementor use it on their own site so I’m guessing it is. When I use a popup menu, on mobile devices the menu items go grey when you tap them which is annoying. I just don’t know how to make a sleek menu like other websites using elementor 😣 Thank you Lytbox 🙏🏻

[@LytboxStudio]

@@NickRama86 I totally understand and believe mobile menus should have a high priority. I do plan on making a video on designing and building a mobile menu with El within the next couple of weeks. It’s at the top of my list. For now I would suggest using the popup feature for your mobile where you can build your own template that goes in the popup. In the template we can add multiple buttons, socials and design in as we like. I have a video on how to build the mobile with pop ups that can help to get started and I’ll get another one up soon showing more on how to design them as well.

[@BeeDunc]

Thank you for this awesome tutorial!

[@nextexitgraff]

dude I've been bitching and complaining to elementor for almost a year now since THEIR css for this feature stopped working after about version 3.7. THIS works perfectly, even for containers and an svg logo, and I wish I woulda watched this sooner! **EDIT: guess I spoke too soon, I'm noticing that whenever the browser window is adjusted the header doesn't stay full width : / ***EDIT EDIT: So I added "width: 100%!important;" before the "background" line in the css, to both sections and it fixed this issue that I see other commenters mentioning!

[@marklohse-miranda1085]

This fix worked for me, thanks!

[@aok1312]

THANK YOUUUUU!

[@saturnbones]

You just saved my life ty !!!

[@pinMy_reviews]

Great tutorial! Very good explained and worked for me

[@JoeNaab]

Loved it. Thanks so much. I did it using containers and it works great.

[@juanb.274]

Hi , thanks for the tut! is there a version that works with containers? On mobile is has a weird behaviour.

[@harbourdogNL]

10:36 Now that Sections have been eliminated, does this CSS code need to be updated as well? Thank you.

[@turcoscorner]

Great tutorial! Thanks! How can we shrink and change color of the icon and icon box widgets with this css? thanks.

[@LytboxStudio]

Hey sorry for the late reply. Here is a CSS snippet for an icon to try: .shrinker.elementor-sticky--effects .elementor-icon { font-size: 20px!important; }

[@turcoscorner]

@@LytboxStudio will try. Thank you for your help!

[@chrishodson2748]

Would love to know this too - I'd like to be able to change the colour of an instagram logo in the header. Great video btw.

[@sailajayanamadala6297]

Thank you very much. This video really helped me a lot.

[@stuartibbotson7179]

Question : If we where Shrinking an icon would it be the same as the button ?

[@KinottoIt]

Thanks for you video. If I need to change the menu font color on scroll? Thanks a lot!

[@kikeUpdate]

great video, is so easy with this guide-video

[@LytboxStudio]

Awesome thanks!

[@doublejz00]

You referenced the menu that was already built. Do you have a video on building the menu?

[@LytboxStudio]

I do, quite a few of them. Check out the rest of the videos on Elementor headers and menus in my channel. I can’t show everything in 1 video 😉

[@Micheline-CorettaMachia-Maimou]

Hello,thanks for the tutorial. Please what if I want it to shrink after delay instead

[@rod964]

Great tutorial! Your explanantin make it very easy. Do you have a solution if you want to make the background transparent but blurry on scroll?

[@rjcapara5882]

This tutorial is really helpful! Thanks Bro. I tried this with the new Flexbox Container feature of elementor and it doesn't work as expected. I hope you can also create a tutorial for that.

[@LytboxStudio]

A lots change with El. I’ll be making updated tutorials coming real soon

[@robertlopez112]

Is there a way to also CHANGE the logo within the CSDS code? If so, I would be very interested in this modification...

[@bySterling]

Very cool man! I’ll def play with and use!

[@LytboxStudio]

Glad to hear! And I dig the name “TheWebStylist” Cheers!

[@snehalj9285]

Amazing video. Possible to also give a code to change button background and text color on scroll? that will be very helpful

[@koladeleolaitan]

I love your videos man. Can you please make one on how to land a WordPress job?

[@LytboxStudio]

Thanks and yes for sure. Finding clients is one of the most important topics to discuss and I have plans to for more videos on this. Thanks! 🙏

[@fadhlitaqwal8183]

ive bee trying ur tutorial and when i insert the css code, nothing change to my website header. any suggest?

[@ilovettdesign]

If you don't want to wait for the link to be fixed you can start/stop the video around 10:17 and manually copy it

[@LytboxStudio]

Big thanks! I got the link fixed:)

[@ilovettdesign]

Hi, thanks for the update. I completed your tutorial and it looked great in Elementor but it doesn't appear as it should when live. I was wondering if you could give me some insight into why this is happening?

[@usebrandable9229]

Hey, thanks so much for this. What would I need to change in the code if I was using a Lottie instead of an image as a logo?

[@bobbymcgill3324]

Great video. Works perfect -One question: I have some text in my header - what is the CSS to shrink that also?

[@timrenker5058]

Hello man, that’s really cool. Thank you very much for the video. Is it possible to incorporate the size of the image in the form of a clamp? My clamp for my image is: clamp(6.25rem, 4.30321rem + 8.197vw, 12.5rem). Can this also be shrunk using a formula?

[@blickfrischdesign]

Hi, great tutorial, thanks! I did it and so it works, but only when I am logged in. In incognito browser and also in other browsers like Firefox for example, it doesn't work. Can it be that it is because of the containers in Elementor? Your tutorial is still with the older version of Elementor. Thanks for your feedback.

[@jessebelleman8070]

Thanks a lot sir!

[@LytboxStudio]

Thank you!

[@NooNaLaluna]

Fantastic!!! Thanks a lot🙏

[@LytboxStudio]

Hey thanks! ❤️

[@LeminSolutions]

I have a headline beside the logo.. how can I shrink that?

[@ms-webdesign]

how can i change the font colour from transparent header to shrinking header

[@christianhimmer]

Thank you so much. This is really helping me in my work hahaha. I have a question. Can yo make a tutorial for a header that when you scroll up it shows??? I can't make it work. Thank you so much for all your tutorials .. greetings from Chile hehehe

[@LytboxStudio]

Hey Christian thanks! I am looking into creating a headed that goes up and down when scrolling. I’ll try to get that tutorial out soon!

[@alnatimmermans9308]

Thank you for this helpful tutorial. I have a menu with 3 columns structure. Is there any possibility of changing/merging the column structure to 1?

[@reviewsagent4]

Make another 1 collumn and just drag all the widgets with the pencil (right-top corner of the widget) in to that 1 collumn.

[@louiseglynne-walton1725]

This is the only video I have found that actually works for a shrinking sticky header! Thank you for this. Just one question: I have added my site title to the right of the logo and before the menu. How could I add a site tagline underneath the site title without it messing up the layout?

[@LytboxStudio]

Thanks Louise! For your site title and tagline, you can use the Icon Box using the dynamic tags. They are the the right of the title and text input fields. Just hover over the icons and you'll see the Dynamic Tags options show. From there, select the site title and the site tagline and then remove the icon and style as needed. I wish KZbin allowed up to posts images to help;) - Let me know if that works for you! Thanks

[@ms-webdesign]

i got it thank you, i forgot to set !important to color

[@benjaminhohner7192]

Hi there, thanks for the amazing tutorial! I realized it doesn't work with scroll snap (at least not Elementar built-in scroll snap). is there any workaround for this?

[@philipandrewsphotography1625]

So for some reason the moment I add in the CSS For the menu the background and shrinking stops. Any ideas?

[@MahmutCamc]

Hello, the JS part of the code works very well, but there is an error in the CSS part. Header causes problems on different screen sizes.

[@VIDEOLPHIN]

Hi @mahmutCamc I´ve the same problem. Did you fix it?

[@VIDEOLPHIN]

Issue fixed! add width: 100%!important; to shrinker css

[@free_vdbergh]

Hello thanks for this video, it really helped me. I'm done shrinking my header, but the only thing that I want to get done is changing the text color, I would like to change it from white to black. Do you have a code for this as well? Thanks in advance!

[@pheonixobrien9997]

Question for your brilliant expertise, please! I used this tutorial and it looks so slick on desktop with a horizontal menu, as you did in the video. But the tablet and mobile versions utilize the hamburger icon, and when you click to drop-down, it only shows the top nav link... the rest of the vertical drop down menu is completely cut off. I tried setting the Z index to 100, and I changed the Elementor Overflow setting from Hidden to Default; but nothing changed. What would you do? Has anyone else run into this? Thanks so much in advance.

[@nubenegra809]

absurdly awesome!!! i saved it as a template for every project! can you please add one more thing in a separate video... to switch from logo to icon (switch image)... please 😁

[@LytboxStudio]

Awesome and thanks! I did try this but the transition looked off. I would suggest for changing a full logo to the logo icon on scroll to use the Changing Headers method. It looks much better and has a seamless transition. Here's a vid I did on this - kzbin.info/www/bejne/bWilhoKpjp6eraM

[@AkoyPinoyRard]

This video is awesome, however the sticky option in my advance menu is not available, could you tell me how to fix it? thanks in advance. your answer will really help a lot.

[@LytboxStudio]

Hey Derard thanks! Are you using Elementor Pro? And Make sure to either be making the section or main container sticky. Only those two have the sticky option.

[@reneematthews9949]

Hi! Great video - Thanks! But the CSS snippet link is not working. It won't open.

[@LytboxStudio]

Hi Renee so sorry, it was the wrong link 😅 The link has been fixed

[@alvarojflores]

Thank you, Jeffrey! For sharing your resources and knowledge. Be healthy and successful! 👍🏻💪🏻

[@CarolinGrant-s7u]

Hi, anyone got some idea why my header is growing instead of shrinking? I got 20px padding top and bottom and 6px each in the shrinking option..

[@josrekker]

Hello, i tried it but it is extending my header instead of shrinking it.

[@elizabethc5207]

Great tutorial. Having problems with the CSS code, it's giving the error "use of !important" and "the property -o-transition is compatible with -webkit-transition and -moz-transition and should be included as well" Not sure if I need some more code in there to get around this, any suggestions?

[@fcolpz]

Dude! Thanks!!

[@LytboxStudio]

Much appreciated!

[@designsosimple2269]

Thank you, excellent video as usual and I think I have asked before, but it would be fantastic if you could show how us to shrink elements WITH swap logo (to something like the logo icon) on shrink, with header disappearing on scroll up (on x number of pixels) and the shrinked version sliding down and reappearing on scroll down, with Elementor please?

[@LytboxStudio]

Hey thanks and amazing idea! I am working on making a header go up and down based on scrolling right now. I did make a video about swapping logos, this can be combined with the shrinking in this video. Let me see how the disappearing header (header going up and down on scroll) goes. Thanks!

[@designsosimple2269]

@@LytboxStudio excellent, thank you that would be a great help

[@chrishodson2748]

Would love to see this too

[@PatrickMcDermott-z9z]

Found your article online and thought it provided instructions for everything I needed for a stick header. Thank you!

[@86Vinks]

I usually don´t comment but this tutorial was just amazing and under half an hour! Thanks man! Just had to subscribe. Just one question: How do I shrink social media icons? I used your code on selector "elementor-icon" but it only shrinks the padding around the icon and not the icon itself. Has somebody an idea?

[@LytboxStudio]

Thanks! I did use both, shrinking the icon directly and the padding and went with the padding because it was more consistent. It depends on what is used for the icon, and SVG or font awesome.

[@rabihussain972]

What should i do .. I have two buttons in right side

[@LytboxStudio]

Two buttons can work. It would take some creativity to make the layout work. One option is to make the second button 100% width and not inline, have it aligned to the right stacked under the single line header and use negative margins to pull it up and into the right place. I hope that made sense...😅

[@georgikanev6745]

Fantastic video and tutorial! My design came out perfect thanks to your guidance. The CSS codes were of a tremendous help. God bless and keep up the good work.

[@leahw3954]

hi can you please explain how to change the color of the button on shrink/scroll

[@LytboxStudio]

It'll take a couple lines of CSS 😅

[@musicanddesign4731]

This is the best and most easy video for this topic. Thanks a lot Jeffrey!

[@EPHONIC]

This is a great start but it doesn't reset the width properly. For example, if you try to change the width of the window on desktop, it scales everything down but then when you try to make the window wider it keeps the header the size on mobile. It won't stretch back out responsively.

[@nextexitgraff]

did you ever find a resolution for this?

[@EPHONIC]

@@nextexitgraff No. I just gave up. Was too frustrated to try another route. :-)

[@leahmccloskey3265]

I am having the same issue when I converted the header to a container (versus a section).

[@nextexitgraff]

@@EPHONIC i actually found a solution, i think I posted in a comment here, but (going off memory) it was something like "background width 100% important!". And it totally fixed this problem!

[@joshlouw1]

Question for you - how can you change the colour of the logo and menu text from say white before you start to scroll to black with a white background when you do scroll down? So basically changing the logo and text colours as well on scroll. Thanks much and keep it coming! Very easy to follow along.

[@sh0dy]

did you find an answer?

[@susandenise517]

This is great. What if one has two logos? One logo is for big screens and another logo is for smaller screens.

[@NextInspections]

I think I have 2 many elements in my header. My Buttons, Phone and Email all got larger and the transparency never activate.

[@johnboyd8053]

A very helpful & useful tutorial. However, your link for the code used isn't working. I'd really like to have access if you'd be kind enough to share. Thank you!

[@LytboxStudio]

Hey John sorry for that. The links been fixed

[@johnboyd8053]

@@LytboxStudio Thanks so much. I really enjoyed and appreciate this tutorial. Have a Blessed day!

[@LytboxStudio]

@@johnboyd8053 to too! Thanks 🙏

[@Acemoddz]

I want to avoid using the padding at it makes the menu size too much, is there another option for shrinkage?

[@LytboxStudio]

Hey Ace, good question. If you don't have padding then the logo or other element will be touching the top of the screen. There's probably padding somewhere. Probably the columns, they have a default 10px padding around them. I find just shrinking the logo usually has enough of a shrinking effect for the whole header. I would look from the elements that fill the space and shrink that.

[@shibambiswas415]

Inline (auto) property not working properly with Image. Please help.

[@86Vinks]

When I turn mobile device (phone or ipad) from normal / upright handheld mode to landscape mode then the header "gets stuck" and is displayed wrong. Am I the only one with that issue?

[@NasreddineAribi]

After using your CSS for over a year, I noticed that it causes some issues with the header responsiveness.

[@hudiyaichwana6312]

very great

[@mariabobert3500]

Hero!🙌

[@rmo4762]

Hi I have the problem on mobile. When the header shrinks then the body jumps up, it is not working smooth. May anyone has this issue too?

[@wehavevictory]

Can you do this tutorial for bricks?

[@VinayKumar-cv6wu]

In my case, code is working but in some systems it's not working and in some it's working. Pls help!

[@LytboxStudio]

Hey Vinjay, can you share more details? I’m what h situations or systems is it not working?

[@TravelingDrukpa]

Thanks a lot!

[@rugiXD]

Idk why but the shrinking transition is not working for me. I'm guessing is an Elementor problem but idk what to do

[@LytboxStudio]

It's still working on my end, it's either the way the code is being added or another plugin conflicting.

[@PeterNielsen-bf1ee]

I have a problem! I've followed your guide and everything is working at first glance, but when you try to resize the menu before the tablet/mobile breakpoints, and then return it to full size it seems to break the header. Found out removing the transition code from the snippets: .shrinker and .shrinker.elementor-sticky--effects fixes this problem! I would like to have an animation though, so got any ideas what might be causing this problem?

[@sjdbfosuhfouehu3]

How do you get web design clients? I'm a self-tough web designer and i've been struggling for the past 3 months to get high-paying clients

[@LytboxStudio]

Hey Miguel, that’s an excellent question and I’ve been there. There’s so much to go over to discuss finding clients since there’s many different factors that would determine what would work best for you. To sum it up, I found it comes down to creating our own marketing plans that work best for us individually. I had help when finding my marketing plan in a mastermind group I was a part of. I’ve started a mastermind community for web creators to learn at a higher level the business behind web design and development. We’re having weekly live calls where we would discuss topics like finding clients and even doing some coaching while on the call. If you’re interested go to the Lytbox Academy website and subscribe. I’ll be sending out invites next week for new subscribers to join. Https://Lytboxacademy.com

[@uff3511]

Great thanks! But unfortunately when I now start zooming on the page with CTRl & Plus/MInus the header is not 100% percent anymore (I set almost everywhere already a width of full with). Is there a way to force in CSS to stay always at 100%

[@crocobrasil]

hi man, doesn't work in flex containers, can you show in your videos how do that?

[@LytboxStudio]

Hey Croco, I originally recorded this tutorial with containers and can confirm it does work for both Containers and Sections the same. I didn't release the Containers version at the time because there were still bugs. Going forward all my tuts will be using containers. Make sure to put the class for the section in the container wrapping your whole header. The one that has the sticky option turned on. If you still can't get it send a link and I'll have a quick look. Cheers!

[@crocobrasil]

@@LytboxStudio ok,thank's, I'm going trying again.

[@leahmccloskey3265]

@@LytboxStudio Hi. I'm just learning how to use containers and am practicing on a previous site that used the CSS with no issues. When I use it with a container, the width doesn't adjust back to 100% after resizing the window. Yes, the class is in the main container that is set to be sticky. Any thoughts?

[@basketballforce]

How to do the shrinking effect for the Menu Cart element?

[@LytboxStudio]

Try adding this (make sure it is below the Shrinking Button CSS to override it) .shrinker.elementor-sticky--effects #elementor-menu-cart__toggle_button { padding: 10px 32px!important; font-size: 14px; transition: all .2s linear!important; -webkit-transition: all .2s linear!important; -moz-transition: all .2s linear!important; } The padding and font size can be changed to shrink on scroll

[@alielabdellaoui1251]

Link to CSS not working ??

[@chrispyer]

Time for a new host.

[@LytboxStudio]

Hey Ali, sorry about that, it’s fixed now

[@andypeutherer4218]

Mate I'm having problems just adding a space between my sections, and idea how. Should be si simple! Love yer vids man but not on that level yet with elementor.

[@LytboxStudio]

Hey Andy big thanks! For your sections - instead of adding space in between, only add padding on the inside and stack your section on top of each other. Try this: for each of your sections add 12px right and left and 80px top and bottom. Do that to each section (excluding the header and banner) and your page layout will look much cleaner. And feel free to reach out with any questions!

[@andypeutherer4218]

@@LytboxStudio thanks man! Could you run yer keen eyeball over the page I'm redesigning. I really have no clue what's going on where. Completely different on mobile too. Cant even get spaces between my text sections. I'm completely lost, I seem to have major conflicts between astra and elementor , and possibly flexbox. You really have the most enlightening vids I have found so far trying to figure this bs out, cheers!! Think I may have a good friend out your neck of the woods you may know too ;)

[@LytboxStudio]

@@andypeutherer4218 sure thing! You can share your website link here and I’ll have a quick look. You got peoples in Chiang Mai! That’s great! Before Covid we had one of the worlds largest digital nomad communities. It’s what brought me out here.

[@calsnoboarder]

Would be great if you revised this video to show how it actually works now with containers... followed the tutorial to the letter and it doesn't work if you have the latest version of Elementor and Elementor pro installed and you don't use an image widget for the logo. I should clarify... you CANNOT use the site logo element (widget)... you HAVE to use the custom image element to make it work.

[@LytboxStudio]

Updates in the works

[@stuartibbotson7179]

What happens with just a hamburger menu only

[@advanced-developers]

Good

[@LytboxStudio]

Thanks!