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.
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!
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!
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!
@@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 🙏🏻
@@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.
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
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!
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?
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 RUclips allowed up to posts images to help;) - Let me know if that works for you! Thanks
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.
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.
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 😁
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 - ruclips.net/video/77BUOsY9kwA/видео.html
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?
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.
@@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!
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
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; }
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!
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?
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.
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.
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%
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.
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?
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?
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!
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?
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.
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.
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.
Adjusted the css a bit for the menu items ''horizontal padding'', after scroll, you want to decrease this a bit, the same % as your typography. So if you'd go from 1.5rem size typography to 1.0rem you decrease it with 33%, same you should do with the horizontal padding. /* shrinking menu */ .shrinker.elementor-sticky--effects ul li a { font-size: .95rem!important; transition: all .2s linear!important; -webkit-transition: all .2s linear!important; -moz-transition: all .2s linear!important; padding-left: 1.0rem!important; padding-right: 1.0rem!important; }
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...😅
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?
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!
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.
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
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.
for every one who wants to try this with the containers version try this on the parent container of the whole header that is sticky. Note that in the min height of the css you want to give something smaller that the min height you gave in your parent container. mine was 150 and i set it down to 120px as shown below. selector.elementor-sticky--effects { background-color: white !important }
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.
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!
@@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 ;)
@@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.
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?
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
Hey Aris, I just now realized It wasn't added to the article. Apologies and thanks for bringing this up! I just added the mobile CSS to the article. I'll add here too: /* Tablet and Mobile Menu Shrinking */ @media screen and (max-width: 1024px) { /* shrinking background */ .shrinker.elementor-sticky--effects { background: #fff; padding-top: 2px!important; padding-bottom: 2px!important; box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05); } /* shrinking image */ .shrinker.elementor-sticky--effects img { width: 100px!important; } /* shrinking menu */ .shrinker.elementor-sticky--effects ul li a { font-size: 1.2rem!important; } /* shrinking button */ .shrinker.elementor-sticky--effects .elementor-button { padding: 10px 32px!important; } } /* End Of Shrinking Sticky Menu */
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!
@@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?
![Free Elementor Sticky Transparent Header Tutorial. [Sticky Header On Scroll Effects] No CSS, No BS😜](/img/1.gif)
Hey everyone the link for the css has been fixed. You can find it here - lytboxacademy.com/shrinking-sticky-header-on-scroll-with-elementor/
Saved this video to my Fave List.
Yo Imran! This means a lot coming from you mate! Cheers🍻
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
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.
Nice! I’m happy it worked 😁
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!
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!
I love this guy, also we look like each others. I learned he opened training website. luck be with you bro.
Haha thanks mate!
Thank you so much for this video. I have been struggling for days until I came across this video.
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!
This fix worked for me, thanks!
THANK YOUUUUU!
You just saved my life ty !!!
dude, you straight to the point and it's very useful👏
So glad to hear!
Hi @Jeffrey. When I resize the window the header doesnt adjust to desktop.
That's an outstanding tutorial. It worked a treat. Thank you.
Thanks!
Finally, somebody explain very very VERY simple :) thanks.
Another brilliant video!! Man you are literally the best Elementor RUclipsr and I really appreciate your videos! 🙏🏻 👊🏼
Wow, thanks! I really appreciate that 🙏
@@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 🙏🏻
@@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.
Thank you for this awesome tutorial!
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
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!
mate you're the best. you deserve way more subs.
I'm having trouble getting this to work with a fluid container for some reason.
Thank You So Much I was struggling for that from long time but your video make it simple thank you very much
So glad to hear! Thanks!
@@LytboxStudio Thank You very much for replying
Thanks mate.
Really easy to follow and works without issue!
🙏
Loved it. Thanks so much. I did it using containers and it works great.
Great tutorial! Very good explained and worked for me
Thank you very much. This video really helped me a lot.
Very cool man! I’ll def play with and use!
Glad to hear! And I dig the name “TheWebStylist” Cheers!
great video, is so easy with this guide-video
Awesome thanks!
Fantastic!!! Thanks a lot🙏
Hey thanks! ❤️
Thanks a lot!
Thank you, Jeffrey! For sharing your resources and knowledge. Be healthy and successful! 👍🏻💪🏻
Thanks a lot sir!
Thank you!
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?
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 RUclips allowed up to posts images to help;) - Let me know if that works for you! Thanks
i got it thank you, i forgot to set !important to color
Found your article online and thought it provided instructions for everything I needed for a stick header. Thank you!
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.
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.
I love your videos man. Can you please make one on how to land a WordPress job?
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! 🙏
Dude! Thanks!!
Much appreciated!
You referenced the menu that was already built. Do you have a video on building the menu?
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 😉
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.
A lots change with El. I’ll be making updated tutorials coming real soon
This is the best and most easy video for this topic. Thanks a lot Jeffrey!
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 😁
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 - ruclips.net/video/77BUOsY9kwA/видео.html
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?
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
@@alexgauvin also having the same issue!
@@katezalewski1513 you have to set width: 100%!important; to .shrinker. That will fix annoying issue
Great video. Works perfect -One question: I have some text in my header - what is the CSS to shrink that also?
Hero!🙌
Question : If we where Shrinking an icon would it be the same as the button ?
Amazing video. Possible to also give a code to change button background and text color on scroll? that will be very helpful
Is there a way to also CHANGE the logo within the CSDS code? If so, I would be very interested in this modification...
Hi , thanks for the tut! is there a version that works with containers? On mobile is has a weird behaviour.
Hello,thanks for the tutorial. Please what if I want it to shrink after delay instead
After using your CSS for over a year, I noticed that it causes some issues with the header responsiveness.
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.
did you ever find a resolution for this?
@@nextexitgraff No. I just gave up. Was too frustrated to try another route. :-)
I am having the same issue when I converted the header to a container (versus a section).
@@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!
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
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!
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?
This is great. What if one has two logos? One logo is for big screens and another logo is for smaller screens.
I think I have 2 many elements in my header. My Buttons, Phone and Email all got larger and the transparency never activate.
very great
Great tutorial! Thanks! How can we shrink and change color of the icon and icon box widgets with this css? thanks.
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;
}
@@LytboxStudio will try. Thank you for your help!
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.
Thanks for you video. If I need to change the menu font color on scroll? Thanks a lot!
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?
how can i change the font colour from transparent header to shrinking header
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!
I have a headline beside the logo.. how can I shrink that?
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?
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.
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.
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%
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.
did you find an answer?
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
Big thanks! I got the link fixed:)
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?
Hello, i tried it but it is extending my header instead of shrinking it.
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?
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!
@@LytboxStudio excellent, thank you that would be a great help
Would love to see this too
Can you do this tutorial for bricks?
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?
10:36 Now that Sections have been eliminated, does this CSS code need to be updated as well? Thank you.
Does not work with flex-container
ive bee trying ur tutorial and when i insert the css code, nothing change to my website header. any suggest?
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?
Make another 1 collumn and just drag all the widgets with the pencil (right-top corner of the widget) in to that 1 collumn.
What happens with just a hamburger menu only
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.
Updates in the works
Hi! Great video - Thanks! But the CSS snippet link is not working. It won't open.
Hi Renee so sorry, it was the wrong link 😅 The link has been fixed
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.
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.
hi can you please explain how to change the color of the button on shrink/scroll
It'll take a couple lines of CSS 😅
Adjusted the css a bit for the menu items ''horizontal padding'', after scroll, you want to decrease this a bit, the same % as your typography. So if you'd go from 1.5rem size typography to 1.0rem you decrease it with 33%, same you should do with the horizontal padding.
/* shrinking menu */
.shrinker.elementor-sticky--effects ul li a {
font-size: .95rem!important;
transition: all .2s linear!important;
-webkit-transition: all .2s linear!important;
-moz-transition: all .2s linear!important;
padding-left: 1.0rem!important;
padding-right: 1.0rem!important;
}
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..
What should i do .. I have two buttons in right side
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...😅
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?
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?
Good
Thanks!
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!
Hey John sorry for that. The links been fixed
@@LytboxStudio Thanks so much. I really enjoyed and appreciate this tutorial. Have a Blessed day!
@@johnboyd8053 to too! Thanks 🙏
So for some reason the moment I add in the CSS For the menu the background and shrinking stops. Any ideas?
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.
Inline (auto) property not working properly with Image. Please help.
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
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
I want to avoid using the padding at it makes the menu size too much, is there another option for shrinkage?
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.
for every one who wants to try this with the containers version try this on the parent container of the whole header that is sticky. Note that in the min height of the css you want to give something smaller that the min height you gave in your parent container. mine was 150 and i set it down to 120px as shown below.
selector.elementor-sticky--effects
{
background-color: white !important
}
selector
{
transition: background-color 1s ease, min-height 1s ease !important;
}
selector.elementor-sticky--effects
{
--min-height: 120px;
}
In my case, code is working but in some systems it's not working and in some it's working. Pls help!
Hey Vinjay, can you share more details? I’m what h situations or systems is it not working?
Idk why but the shrinking transition is not working for me. I'm guessing is an Elementor problem but idk what to do
It's still working on my end, it's either the way the code is being added or another plugin conflicting.
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.
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!
@@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 ;)
@@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.
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?
How to do the shrinking effect for the Menu Cart element?
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
Where's the tablet and mobile css code?
Hey Aris, I just now realized It wasn't added to the article. Apologies and thanks for bringing this up!
I just added the mobile CSS to the article. I'll add here too:
/* Tablet and Mobile Menu Shrinking */
@media screen and (max-width: 1024px) {
/* shrinking background */
.shrinker.elementor-sticky--effects {
background: #fff;
padding-top: 2px!important;
padding-bottom: 2px!important;
box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05);
}
/* shrinking image */
.shrinker.elementor-sticky--effects img {
width: 100px!important;
}
/* shrinking menu */
.shrinker.elementor-sticky--effects ul li a {
font-size: 1.2rem!important;
}
/* shrinking button */
.shrinker.elementor-sticky--effects .elementor-button {
padding: 10px 32px!important;
}
}
/* End Of Shrinking Sticky Menu */
hi man, doesn't work in flex containers, can you show in your videos how do that?
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!
@@LytboxStudio ok,thank's, I'm going trying again.
@@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?