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.
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?
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
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?
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?
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?
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?
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!
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.
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; }
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!
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)
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
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!
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?~^^
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
@@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?
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!
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.
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 😅
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 ?
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.
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 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!
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
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
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
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.
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 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. :|
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.
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
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?
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.
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?
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 😀
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
@@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.
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!
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.
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.
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
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!
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 ?
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.
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.
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.
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 :-(
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/
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.
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.
thanks!
Thanks!
thanks man
you are the true hero
My man
Amazing! I love your channel, man. You explain things so well and your style really connects with me - I appreciate you, good sir! Subscribed!
Great tutorial - thanks man! I like that you don't have to use any extra plugins or anything
I'll do what ever I can to avoid plugins lol 😂
Very easy clean process, Thank you man
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?
Me also the exact same problem
I think it has something to do with safari because of the plugins or extensions of safari browser
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?
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
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
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?
Thanks soooo much!! 🙌🏻
Thanks! 🙏
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.
Happened to me! Hopefully someone can help
Same here!
Same her
Same here, please, any solution?
It's not IOS but Safari.
Clear, Useful, Great! Thanks so much for making this TUT Bros!
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?
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?
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 😅
Is this option possible only on elementor pro?
has there already been a fix for the problem that makes the header disappear when scrolling back to the top of a mobile device?
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?
The css should hide the ‘hidden’ container initially.
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!
Good question. I try and avoid scroll snap on Elementor. In my experience, it breaks things 😅
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
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.
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;
}
Thank you brother, for this helpful video. Your presentation is very good.
You are most welcome! Thanks 🙏
Always excelents tutorials! Respect! 🔥
Much respect back! Cheers
Thank you, very help. Been looking for this options for some time.
Are there any news about fix when header disappear at the top of the page on mobile and touchpad swiping?
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!
Same thing happens for me. Where you able to find a fix to this?
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)
in admin panel position giving spacing issue because of admin tool bar, how to avoid that?
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
Well explained and exactly what i needed. Thanks!
Thank you so much.its done my work!
So glad to hear!
Quality content as always.
Much appreciated thanks! 🙏
Great explanation! Pure javascript too! 🙌
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!
same problem
Worked like a charm!!
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?~^^
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
You are the best! Simple indeed Thank you so much
Thank you very much. Very clear explanation
Thank you for code , but not work with scroll snap elementor.
Thank you so much for this!
Thank you
You’re welcome and thank you! 🙏
Is there a way to hide it after scrolling, let's say 100px on the page??
omg i figured it out, im shook
Theres an error, when I go all the way up on mobile, the header disaper and not stay in thei place
This is awesome! Is there a way to set this so that it only triggers a certain distance down the page?
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?
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!
Gracias parcero - great video. Fron Colombia bro 👑👑🚀🚀
it worked properly, thanks
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.
Try - body {overflow-y: hidden;}
Thank you so much!!!
On mobile it is hidden when scrolling down. But when you scroll up it doesn't show up again.
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 😅
Good content ❤️
I appreciate that. Thanks 🙏
Great video keep it up
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 ?
This could be from a caching plugin. Try putting the CSS in your Customizer. CSS doesn’t cache when in there.
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.
whats the name of the plugin
@@ngonidzashemujee5704 sticky header effects for elementor
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? :(
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
what about change color of menu font, instead of its size Lytbox ?
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
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.
why when i scroll up my header becomes half of its normal size ?
ASAP
Need help here Please Lytbox
Thank you Lytbox
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?
Please add one more thing. How to change nav text color with this hide option?
Great tutorial, just subscribed! Is there a way to adapt this to a header which is stuck to bottom of page instead of top?
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.
This is a good question and idea! I am adding it to my list. Thanks!
Thank you!
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! :)
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. :|
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?
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.
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
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.
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.
It does not works for Safari and Mobile. What should I do?
Curious man do you sell you awesome custom designs for purchase/downloads?
Thanks! I’m not selling any now but I am putting some together to give away for free:) just sign up at lytboxacademy.com
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?
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.
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?
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?
Can you make a nav menu pointer with rounded border i tried everything but cant do it and i have subscribed your channel
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?
Nevermind! I was able to do it on my own with some code! Yay :)
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 😀
Hi Bro, you look like handsome with your new hairs better than me. :))
Haha thanks 😅
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
Is it possible to have this effect just for the desktop version, but not for the tablet or phone version?
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 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!
Can you please make a Tutorial on how to change menu appearance based on section background that is it scrolled to.
Does not work for me. The header breaks when scroll up.
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.
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 👊
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
It might only be in the Pro version
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?
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!
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 ?
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.
I have a problem with the mobile it does not show when I reload the page only when I go down and up again.
Thank you! Great stuff
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.
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
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 :-(
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.
for me its really laggy and not really fluent, Kinda seems buggy but I have follewed each step exactly
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/
i should have same functionality for an elementor button
I can't make it work correctly :(
did nothing for me
try to not make it with elementor PRO pls, im not a pro user
try changing size of your browser window - to narrow than back to wider - it all breaks appart
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!!