Elementor Sticky Headers: Hide Header on Scroll Down, Show On Scroll Up

[@alexnijs76]

If the code snippet you copied is making the transition look a little bit jagged, try this code out: var prevScrollpos = window.pageYOffset; var header = document.getElementById("hide-header"); window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { header.style.transform = "translateY(0)"; } else { header.style.transform = "translateY(-80px)"; /* adjust this value to the height of your header */ } prevScrollpos = currentScrollPos; } #hide-header { transition: transform 0.4s ease; } This changes the abrupt change in the "top" property and allows it to be smoother. By using transition: transform, this also makes it smoother.

[@pedrosanhueza7747]

thanks!

[@bruceaisher]

Thanks!

[@AdityaSingh-ni7vn]

thanks man

[@brucechen7752]

you are the true hero

[@nathaniel6465]

My man

[@arcticphono866]

Thanks you made that super clear and easy!!

[@bruceaisher]

Great tutorial - thanks man! I like that you don't have to use any extra plugins or anything

[@LytboxStudio]

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

[@soheil6114]

Hello there! Very informative and high quality tutorial. appreciate it, thanks (BTW the tip to put every code in the footer for better loading was awesome)

[@mojoro24]

Amazing! I love your channel, man. You explain things so well and your style really connects with me - I appreciate you, good sir! Subscribed!

[@denbypot]

Hi Jeffrey, could it be that this script (btw. Imran has a similar one) does not work in Safari? (it works fine in Chrome) When I use these scripts the header disappears as desired on scrolling down and comes back during scrolling up. But as soon as you reach the top top of the site the header jumps up to nowhere and leaves a blank space of the size of the header hight. The only way to get the header back is to reload the whole page. What do you think?

[@sambal8272]

Me also the exact same problem

[@sambal8272]

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

[@SteveJones031]

I'm getting the same issue. Any fix found?

[@ThePaciFest]

Did you guys find a fix, same issue here.

[@claygaming3932]

Very easy clean process, Thank you man

[@RaymondEiber]

easy, simple, love it

[@mandalsubha06]

A very very useful code snippet indeed. But my transparent header is disappearing when I scroll to the top of the website. Is there a fix?

[@KristofVanRentergem]

hey Jeffrey, this works perfectly when scrolling up... but when I'm scrolling down, the header disappears immediately when I scroll down for 1 pixel, even tough I set the "effects offset" on 300px. Is there perhaps something that we can overrule in the code? Any other users who had the same problem?

[@yaelleshem7802]

hey Jeffrey, The tutorial is very clear. It works perfectly when scrolling down, but when I'm scrolling back up, the header does not fully reappear. The top of it stays above the viewport. This only happens in view mode (not in editing mode). Any ideas how to solve that problem?

[@GrahamPhillips1985]

Great work! Is there a way to get this to work whilst also utilising Scroll Snap? I want to create a full-viewport scrolling site and the menu hiding on scroll down and showing on scroll up would top this off perfectly!

[@LytboxStudio]

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

[@darktemplarcm666]

Thank you so much!

[@matthewhart9918]

I'm having an issue where the header doesn't come back all the way upon scroll up. Also another unrelated issue is the header is going behind the hero image just below it but is on top of everything else on the page. Any help would be great. Thanks!

[@manelbrandaopereira9752]

@@matthewhart9918 have the exact same issue. It’s only going back down half the way. Have you found a solution?

[@franciscomanuelgomez5050]

Thanks soooo much!! 🙌🏻

[@LytboxStudio]

Thanks! 🙏

[@limacon4745]

Great one! But sadly does not work well on iOS devices. The menu disappears when scrolled up when you are on the top of the page.

[@juanorttega]

Happened to me! Hopefully someone can help

[@alybaomer]

Same here!

[@sambal8272]

Same her

[@mllemata]

Same here, please, any solution?

[@vidaone3647]

It's not IOS but Safari.

[@calmingmoments620]

Thank you for this - is there a way to stop the menu disappearing after a delay in either scroll or time? Thank you for your help

[@sirhenryhu]

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.

[@PintoTV]

Great tutorial & I love your channel :) Quick question, I didn't see that you mentioned what to do with the container that we want to show & hide when the page is loaded, right now I have 2 containers in the header: 1. The main 2. The hide & show. Do I need to give it a negative margin or hide it somehow?

[@LytboxStudio]

The css should hide the ‘hidden’ container initially.

[@devlife5596]

Clear, Useful, Great! Thanks so much for making this TUT Bros!

[@jesseyzepeda]

I noticed that after adding the css the menu scales down from desktop to mobile as the screen size changes but not back up from mobile to desktop. It is not a huge deal except on mobile i I have a break point for landscape too. if I start in portrait and then flip landscape the menu stays the same size as it would be on portrait screen width leaving a bunch of dead space on the screen. Any suggestions on how this can be addressed?

[@mobiuxlabs]

Here's the modified JavaScript for the header disappearing when you scroll to the top on touch devices: var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos || currentScrollPos

[@MaryJoeyIntas]

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

[@จุ๋ยดุ่ย-ค9ภ]

Thank a lot!

[@JohnnieDo]

Thanks, this did the trick!

[@Xandosoulja]

Yes, thanks!

[@Faisal-cq2sx]

thank you so much

[@pulp5618]

Hi, thank you. My sticky header was misaligned when resizing the browser window, the "all" in " transition: all .5s ease!important;" was causing bugs and problems, i changed the css code and problem solved

[@BairahaFruits]

Thank you brother, for this helpful video. Your presentation is very good.

[@LytboxStudio]

You are most welcome! Thanks 🙏

[@raz0u]

Is this option possible only on elementor pro?

[@LakeMeadows]

Thanks for this! I'm using it on a site I'll be launching this week. The hide header works real smooth on desktop and mobile. But, I ran into a problem when scrolling on my tablet (iPad Mini). Whenever I scroll back to the top of a page the header doesn't stick, instead it hides. Is there any way to fix this? Thanks again!

[@jacek8889]

same problem

[@Regfol]

Hi, Do you have this template for sale?

[@geeranton]

Are there any news about fix when header disappear at the top of the page on mobile and touchpad swiping?

[@CowMeCow]

Awesome Tutorial! Thank you so much!~ BTW, I have Two sets of Headers, Header 1 for PC and Header 2 for Tab/Mobile, this "Hide Header" worked great on the Front(Main) Page, but it didn't work on subpages. could you help to fix this?~^^

[@LytboxStudio]

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

[@patrickjames5289]

Has anyone found a fix for when you have Sticky enabled and you resize the window but the header doesn't go back to 100%?.

[@matchelo3]

In one of the comments below I found it and it worked: var prevScrollpos = window.pageYOffset; var header = document.getElementById("hide-header"); window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { header.style.transform = "translateY(0)"; } else { header.style.transform = "translateY(-90px)"; /* adjust this value to the height of your header */ } prevScrollpos = currentScrollPos; }

[@PrimarchRoboleonFrenchyman]

@@matchelo3 Thank you, buddy ! Was stuck trying to fix that for 30m

[@ciitrusdigital]

This is awesome! Is there a way to set this so that it only triggers a certain distance down the page?

[@LytboxStudio]

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

[@webseiten]

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

[@deut]

​@@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?

[@jeltesteur8286]

awesome video. I implemented the script just like you suggested, but not with a separate header for mobile versions. however if I put the website half screen and move it back to wide screen, the header stays narrow now. so there seems to be a bug. it was working fine before implementing this. is this just me or is there a bug in the css or java?

[@patrickjames5289]

I have the same issue when Sticky is enabled. Did you ever find a fix? The header doesn't go back to full width when you resize it back. You need to manually refresh the page.

[@jessebelleman8070]

has there already been a fix for the problem that makes the header disappear when scrolling back to the top of a mobile device?

[@paul6925]

Great explanation! Pure javascript too! 🙌

[@estudiocrow]

Always excelents tutorials! Respect! 🔥

[@LytboxStudio]

Much respect back! Cheers

[@masquerade0133]

When I load the website, the header hides immediately when i'm on the top of the page. Is there a way I can leave it there and have it show up when i scroll up? (essentially the same like you did but keeping the header showing when at top of page, first load)

[@rakibulhashan5446]

Worked like a charm!!

[@hudiyaichwana6312]

what about change color of menu font, instead of its size Lytbox ?

[@mohamedyasin5863]

Thank you so much.its done my work!

[@LytboxStudio]

So glad to hear!

[@zhincic]

Any clue on how it'd be set under the other one container? As I have the container with logo, hamburger menu and account icon and then another one purely with search-bar My idea is to have the search-bar appear only when scrolling upwards and I don't like it taking place of the first container when scrolled upwars. It goes to the top, instead of where it's initially put in header template. - Appreciate your time & skill, Jeffrey!

[@ourtraveljournalnl]

Hey, Thanks for the great video! I have one question... I've done all the step and the header hides on scrolling down and reappears when scrolling up, BUT when I'm at the top of my page, it disappears... because there is some kind of 'bounce' at the top when you scrol it hides again. It's really annoying and I can't get it fixed! what am I doing wrong? :(

[@LytboxStudio]

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

[@jkholmes_rei]

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

[@gabrielcardenas9344]

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

[@elcolo73]

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

[@jasonbruton5131]

Thank you, very help. Been looking for this options for some time.

[@MrRettopyrra]

Thank you for you work. It worked very well ! But there is an inconvenient I can't solve myself. On the first scrolling down the header is hiding... but instantly. Without any effect. But it's strange because after that it's working well and smooth. Do you know why ?

[@LytboxStudio]

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

[@dragosvrejiu558]

Quality content as always.

[@LytboxStudio]

Much appreciated thanks! 🙏

[@arturszyna4988]

Thank you very much. Very clear explanation

[@Artenreich]

Well explained and exactly what i needed. Thanks!

[@DaydreamsPonderings]

Thank you for this! I got it working but when I scroll back up the whole header doesn't appear. It cuts of the top of it and adds white space between the header and content of page. Any fix to this? Thanks so much!

[@kylequinn5629]

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

[@simmagedesigns9260]

@@kylequinn5629 @DaydreamsPonderings Did either of you figure this out? I have the same thing happening...

[@Javiergcrespo]

Is there a way to hide it after scrolling, let's say 100px on the page??

[@Javiergcrespo]

omg i figured it out, im shook

[@beshaw9879]

why when i scroll up my header becomes half of its normal size ? ASAP Need help here Please Lytbox Thank you Lytbox

[@AlexKores99]

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

[@brandonwest7419]

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

[@ryanc3657]

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

[@gabriellagranqvist9468]

Same issue here. Is there a solution?

[@ZetsubouZolo]

hope someone sees this: the code works fine so far, it's very cool thanks! But when you scale the browser window small and then scale it back to big the menu box stays the smallest size you scaled before, it doesn't grow back in size. why is that?

[@LytboxStudio]

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 😅

[@prbv1308]

You are the best! Simple indeed Thank you so much

[@Stephen-ef5zk]

Great tutorial, just subscribed! Is there a way to adapt this to a header which is stuck to bottom of page instead of top?

[@vermelhonika]

it worked properly, thanks

[@raghuramjc2798]

Jeffrey, a nice tutorial, as always. I am using Elementor free version and do not get "add code" in Dashboard under "Elementor - Custome Code". What could be the reason? Thanks in advance.

[@LytboxStudio]

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

[@raghuramjc2798]

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

[@Ulcragyceptimol]

Thank you very much for the gift of this tutorial and code, it works extremely well. In my browser though, when I scroll to the bottom of the page, the page goes past the actual bottom of the page and automatically 'bounces' up when I take my finger off. When it does, the menu reappears of course. Is there any way to prevent this happening? I think Mobiux posted a mod to the code which fixes a similar issue when scrolling to the top if that's any help.

[@LytboxStudio]

Try - body {overflow-y: hidden;}

[@bySterling]

Curious man do you sell you awesome custom designs for purchase/downloads?

[@LytboxStudio]

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

[@igorsrusakovs385]

Thank you for code , but not work with scroll snap elementor.

[@jaroslavkupca5082]

Hello, than you for your tutorial. Can you help me how i can change background color of sticky menu, if i want it is different, than top fixed menu?

[@DMLeBeau]

what if you want to keep the button live on the mobile version. Is it possible with CSS to switch positions so that the meu appears on the far right?

[@LytboxStudio]

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.

[@pusuluri27]

in admin panel position giving spacing issue because of admin tool bar, how to avoid that?

[@LytboxStudio]

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

[@loisahmed2085]

Thank you

[@LytboxStudio]

You’re welcome and thank you! 🙏

[@brandaccelerators]

Great video keep it up

[@derpferdeflusterer3460]

Is it possible to have this effect just for the desktop version, but not for the tablet or phone version?

[@LytboxStudio]

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

[@derpferdeflusterer3460]

@@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?

[@LytboxStudio]

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

[@derpferdeflusterer3460]

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

[@LytboxStudio]

@@derpferdeflusterer3460 You can add in the Customized > CSS

[@advanced-developers]

Good content ❤️

[@LytboxStudio]

I appreciate that. Thanks 🙏

[@searching_knowledge_tjk]

Thank you so much!!!

[@alybaomer]

Great tutorial! I am new to code and I made a sticky header that changes when you scroll. I am experiencing 1 problem though. Containers I have that are also sticky completely change to white (the color of the header background on scroll) and do not show any contents. I'm guessing because the code changes all sticky elements. Is there a way to avoid this?

[@alybaomer]

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

[@shibambiswas415]

Please add one more thing. How to change nav text color with this hide option?

[@jrashish]

Hello Jeffrey thank you soo much for the tutorial, I followed it but my header does not appear back in the desktop - for mobile, it is working fine

[@maomax123]

Gracias parcero - great video. Fron Colombia bro 👑👑🚀🚀

[@videoprosuk]

Thank you so much for this!

[@SaraCarozzolo]

I followed another one of your menu tutorials and it was doing something weird, which is also happening with this one, so maybe something on my end. When I pull the browser window in and then back out wide, the menu stays at the width I previous had the window out. Have you ever had that experience? Appreciate your amazing tutorials! Thank you!

[@TresPerros]

Any idea why I wouldn't have the sticky option in motion effects? I made sure to update to the latest version of Elementor. I do use the free version, but I had thought it was included in the free version. Thanks

[@LytboxStudio]

It might only be in the Pro version

[@COMEDYCHANNEL-nd6ce]

Can you make a nav menu pointer with rounded border i tried everything but cant do it and i have subscribed your channel

[@RezerwatPrzygody]

Hi, appreciate your tutorial(s). There's a Safari issue, when I use these scripts the header disappears as desired on scrolling down and comes back during scrolling up. But as soon as you reach the top top of the site the header jumps out of the screen and leaves a blank space of the size of the header hight. Are there any updates from you on this one?

[@martindimitrov2229]

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.

[@MaryJoeyIntas]

Thank you, I've learned a lot using this tutorial but I've discovered an issue on Safari/touch devices where the sticky header totally disappears when scrolling back to topmost of the page. I was able to fix it somehow by using the solution in one the comments here but seems like it has a flickering issue. Would be lovely if you could share your fixes on this too! :)

[@jessebelleman8070]

Did someone already found a solution to this?

[@MaryJoeyIntas]

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

[@gonzalordtm]

Thank you!

[@ppietras97]

The header menu disappears on mobile when you scroll to the top of the page because if you scroll up too high it automatically drops the page back down and the menu disappears

[@LytboxStudio]

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

[@ppietras97]

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

[@MrPlome]

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

[@geeranton]

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

[@Pinacoladaasdas]

This tutorial is only for Elementor pro version. i realise that half way in the video. But i found a plugin that is easy to use (sticky header effects for elementor). Good luck with your website.

[@ngonidzashemujee5704]

whats the name of the plugin

[@Pinacoladaasdas]

@@ngonidzashemujee5704 sticky header effects for elementor

[@sohrabpourkhalili]

Thanks for your nice topics. But I think the below code maybe have less issues for most of users. var prevScrollpos = window.pageYOffset; var header = document.getElementById("hide-header"); var headerHeight = header.offsetHeight; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { header.style.top = "0"; } else { header.style.top = "-" + headerHeight + "px"; } prevScrollpos = currentScrollPos; } /* Show Hide Sticky Header Speed Control */ #hide-header { transition: all .8s ease!important; }

[@faizrehman7937]

Great tutorial as usual. I have been searching around both on youtube & community forums to see if there is any tutorial on making a trending posts list in elementor with a fully custom Post design using loops/listings. I found some but they're are not as accurate, others were using Guterberg plugins for it. Would be very generous if you could help us create a tutorial to achieve that.

[@LytboxStudio]

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

[@alexfullercleveland9871]

This works on my homepage, but for some reason, not any other page with the header applied. It's also not working on Safari at all. Any ideas?

[@jaroslavkupca5082]

I found problem how change background of shrinker menu, but does not make affect to color of fonts in css, even with important code. For example i want main header transparent with white menu fonts and white logo (that is ok and i can do it), but i do not know how to do shrinker (sticky header) has full background white color with black font menu and black logo. Can give me some advice. Thank you.

[@daczito]

Hey Jeffrey. Have you tested this out on mac safari? It works perfectly on chrome, but on safari it glitches. If you scroll up while at the complete top of the page, it will hide the header.

[@LytboxStudio]

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!

[@ngonidzashemujee5704]

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

[@LytboxStudio]

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

[@ngonidzashemujee5704]

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

[@mslcreative]

I like your videos, they are well presented and the results work, all helps the community to grow. Thank you I do have a challenge that according to Elementor Pro support can't be done. I setup a form to capture data for marketing and after clicking the submit button a PDF with information is shown. I want the PDF to display on a new tab and put some html along with the PDF URL but it doesn't work as standard. Any ideas would be great, the client is happy as it is and this is purely for my satisfaction 😀

[@arturo5050]

Theres an error, when I go all the way up on mobile, the header disaper and not stay in thei place

[@kylequinn5629]

I am running into the issue where when I scroll back up, the header only comes back halfway. Do you know why this is happening?

[@somelethalart]

Hello. Great tutorial! Explanations are very clear and I appreciate you're doing tutorials with UI&UX in mind. Short question: What can I do if on desktopI have a little section of 30px height above the sticky header (contact bar)? Can the js be separated for desktop and mobile? So on desktop I put a distance of 30px from top for initial state? The mobile js would be 0px distance for the top for initial state of the header. Thanks a lot!

[@LevonGavalian]

Can you please make a Tutorial on how to change menu appearance based on section background that is it scrolled to.

[@diagosa]

Hi Bro, you look like handsome with your new hairs better than me. :))

[@LytboxStudio]

Haha thanks 😅

[@pokdavid]

Great tutorial, but I'm having some trouble with the shrinking header (I followed exactly the process you taught in the other video). Once I activated the script, the whole shrunk stuff stopped working on the live page, so the header disappeared and appeared as it should, but the background and shrunken parts didn't activate. (it works perfectly on the elementor tab, but not on the live page). Does anyone have any thoughts on why this is happening? Thanks

[@colexwerbeagentur3018]

On mobile it is hidden when scrolling down. But when you scroll up it doesn't show up again.

[@LytboxStudio]

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 😅

[@franciscoperez-by3hh]

Hello Lytbox, I love your tutorials bro ❤️. Could you make a tutorial on how to create a website for Real Estate. In Codecanyon I made some Themes in this niche, but like you I am afraid that the person who created the Theme will not perform more Updates or abandon the project, you know how uncomfortable it would be to tell your client that his site is not going to work anymore , it would be disappointing. You could create something with element, Crocoblocks or ACF or any other way you know. Greetings in advance.

[@LytboxStudio]

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.

[@franciscoperez-by3hh]

@@LytboxStudio TKS BRO 👊

[@relevailleslaurentides1063]

The only thing is that when scrolling back up, the menu doesn't come back as it was, it is kind of higher and does hide a part of it... Do you understand why ?

[@self-defence3641]

I have a problem with the mobile it does not show when I reload the page only when I go down and up again.

[@mauriziolarocca]

It does not works for Safari and Mobile. What should I do?

[@IsotonikStudios]

Bum! I built a two container menu, the first scrolls off the screen when I move down the second container then sticks to the top and shrinks... I wanted to move further and then have this second container vanish, with the scroll back up (in the middle of the page height) and have both containers reappear, this technique obviously doesn't work :-(

[@LytboxStudio]

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

[@IsotonikStudios]

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

[@LytboxStudio]

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

[@IsotonikStudios]

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

[@LytboxStudio]

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

[@DawidJoks]

Thank you! Great stuff

[@rswebmarketing]

Does not work for me. The header breaks when scroll up.

[@how2dodis]

for me its really laggy and not really fluent, Kinda seems buggy but I have follewed each step exactly

[@LytboxStudio]

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/

[@ms-webdesign]

i should have same functionality for an elementor button

[@antoniomaria2012]

I can't make it work correctly :(