thanks!

Thanks!

thanks man

you are the true hero

My man

I'll do what ever I can to avoid plugins lol 😂

Thanks very much, this help a lot! Were you able to solve the flickering as well?

Thank a lot!

Thanks, this did the trick!

Yes, thanks!

thank you so much

Me also the exact same problem

I think it has something to do with safari because of the plugins or extensions of safari browser

Happened to me! Hopefully someone can help

Same here!

Same her

Same here, please, any solution?

It's not IOS but Safari.

You are most welcome! Thanks 🙏

The css should hide the ‘hidden’ container initially.

I’ll need to test and update on my next review. I try and update the code periodically to keep up with Elementor’s update 😅

Good question. I try and avoid scroll snap on Elementor. In my experience, it breaks things 😅

Thanks! 🙏

Much respect back! Cheers

Hope @lytbox would give some clues on this topic. I have to say: I love the effect and it does really give visitors a better experience but I have to give it up because it is TOO SENSITIVE once the visitor slightly scrolls. In that way, it may be causing the opposite experience where we want our visitors to feel in the first place.

Same thing happens for me. Where you able to find a fix to this?

same problem

So glad to hear!

This method will only work with 1 menu. It was the easiest solution without a bunch of code. For the subpages, can you share a link and I can take a quick look. You can reach me on Instagram

Much appreciated thanks! 🙏

Try - body {overflow-y: hidden;}

whats the name of the plugin

@@ngonidzashemujee5704 sticky header effects for elementor

Thanks and sure, I’ll send an update shortly with a way to set a distance trigger

@@LytboxStudio Can you set that the header only appears after you have scrolled up 50px or 100px? I have the problem that the header appears from time to time by itself.

​@@LytboxStudio you're video is awesome!! :D I've been looking around everywhere for the answer. How to make it so that the header disappears when scrolling down after a certain px for instance?

Hey I’ve heard a couple people mention this. Can you share a link so I can check why it’s happening? You can send it to my IG or here

@@LytboxStudio having the same thing happen only for tablet and mobile when using chrome. The "bounce" once you hit the top of the screen hides the header entirely, but it will reappear once I start scrolling again. Curious if you have discovered how to fix this. Thanks and love the content!

@@jkholmes_rei Have the same Issue, there's any idea how to fix it?

try this: keep in mind I changed the id to #hide-logo var prevScrollpos = window.pageYOffset; var headerHeight = 100; // adjust this value to the height of your header var scrollThreshold = headerHeight; // adjust this value based on when you want the header to start hiding window.onscroll = function() { var currentScrollPos = window.pageYOffset; // Check if the user has scrolled down the threshold before hiding the header if (currentScrollPos > scrollThreshold) { if (prevScrollpos > currentScrollPos) { document.getElementById('hide-logo').style.top = '0'; } else { document.getElementById('hide-logo').style.top = '-' + headerHeight + 'px'; } } else { // User is at the top of the page or within the threshold, keep the header visible document.getElementById('hide-logo').style.top = '0'; } prevScrollpos = currentScrollPos; }; source: a comment in lytboxacademy.com original post

This could be from a caching plugin. Try putting the CSS in your Customizer. CSS doesn’t cache when in there.

There is no avoiding that. I keep incognito open to see how it is for the end user. I know it's kind annoying, me and my lead dev tried finding a solution and no luck

You need to edit line 9, change 80px to your header size ---- document.getElementById('show-hide-header').style.top = '-80px'

I too am having this problem, even when I change the header sizing in the javascript custom code. I am trying to fix it myself. I will let you know if I find a solution

@@brandonwest7419 somewhat same issue here. Copied the video and now it does disappear and reappear, but it it leaves a big white gap between the header and main page

Same issue here. Is there a solution?

omg i figured it out, im shook

You’re welcome and thank you! 🙏

Did someone already found a solution to this?

@@jessebelleman8070 wasn't able to find a solution for the flickering issue. My client decided to revert back to just sticking the header regardless of scroll. :|

This is a good question and idea! I am adding it to my list. Thanks!

Thanks @Raghurman! I think the Custom Code in Elementor is only available in the Pro version. I’d have to double check. A work around could be using a code plugin like Code Snippets or Header and Footer snippets

@@LytboxStudio Thanks, Jeffery. Will be glad, if you pl. let me know.

Hey I'm going to run some tests on mobile and have a fix asap!

@@LytboxStudio would you be able to let me know once you do? Would really appreciate it🙌🏼

Same problem here on desktop. It works fine until you scroll past the top of the page, then it hides again. Because it drops down..

@@MrPlome noticed that the problem appears while scrolling on laptop with Touch Bar. Its OK when using mouse. Waiting for fix too.

I appreciate that. Thanks 🙏

Haha thanks 😅

Thanks! I’m not selling any now but I am putting some together to give away for free:) just sign up at lytboxacademy.com

Nevermind! I was able to do it on my own with some code! Yay :)

Good question. I did test this out and it can be done with the new Container. There are options to change the order for tablet and mobile.

It is. When you turn on ‘Sticky’ there is an option for desktop table and mobile. Just turn them off and they should scroll up as normal

@@LytboxStudio I turned on sticky and deleted table and mobile from the list. However, the menu icon still.disappears when I scroll down just like the nav menu does on the desktop version :( Is there maybe something I can add to the css code, so that it only applies to the desktop version?

@@derpferdeflusterer3460 ok I see. It is possible to add some media queries in the CSS. Another simple solution though would be to create 2 menu sections, first one of desktop with the effect and the second for tablet and mobile that are normal and use the responsive setting the hide them.

@@LytboxStudio where should I add which CSS Code 🙈?

@@derpferdeflusterer3460 You can add in the Customized > CSS

I'll check this out and see if it's still working on my end. I try and update the code snippets periodically so they all still work. I'm due for a another review 😅

Hey there, same here. Do you have any solution? I figured out that if I use a "go to the top" button, the section will not hide, but as soon as I scroll up it disappears again.

It might only be in the Pro version

Hey Francisco thanks mate! And sure, these are fun projects! I use Elementor with Jet Engine to make my listing and real estate sites. I have plans to make complete in-depth tutorial for building websites like these and have added this to my list.

@@LytboxStudio TKS BRO 👊

Hey Daniel, yah one of the recent updates messed up the sticky headers. I’m working on a fox now. Make sure to have snap scroll off in the settings. There’s a bug where Snap Scroll breaks the sticky effects. I’ll have an update soon for all my header vids. Thanks for the heads up. Cheers!

@@LytboxStudio Hie Jeff, thanx a lots for the sticky headers, much appriciated. think chrome did an update too thats messing with the header. it works pefect on edge and opera but recently it started not showing on chrome. thanx with ane update looking forward to it, i have 3 websites that have sticky headers.

@@ngonidzashemujee5704 Elementor just released an update fixing the sticky issues with the new Chrome update.

@@LytboxStudio noted with thanx. Let me look unto it

If it works for me and thousands of others, then it might be something you are doing wrong 🤔

@@LytboxStudio yeah but it doesn’t work for you, you said so in the video itself, you can only show and hide one container…

​@IsotonikStudios the tutorial works. You want to do something different and will need to do a bit of extra dev and apply additional CSS.

@@LytboxStudiook so it is possible to do this with a two container header then, but lost now….

​@IsotonikStudios anything is possible with web dev. It'll take a bit of CSS adjustments on your end.

It's most likely something else on your site conflicting like other plugins. You can see how it should work on the example page here - tuts.lytboxacademy.com/hide-header-on-scroll-down/

same problem here. Any idea how to solve this? I think we should have some code to revoke the code again during changing the size of the browser

Had the same issue! If you remove the CSS part (the section with tags) it works properly when resizing the browser window. However, the sleek animation is gone. I'm currently looking to find a solution to still have a working animation.

Hey @liyem ! did you solve the issue of the resizing? i will really appreciate if you can point me to the solution Thanks!!