I’m sorry but “hide menu on scroll down/up” option isn’t available yet. However we plan on adding this option in the future.
I wish this was something simple that I could just write some code for you but it’s too complicated for that. Again, sorry I can’t help with this just yet but hopefully soon we will add this option.
Lmk if there is anything else I can help with.
Thanks for your prompt answer, Robert.
Well there are 2 solutions on Internet that you may be interested in seeing:
– adding custom code that uses jQuery : https://elementorcodes.com/elementor-header-show-scroll-up/
– the addon Pafe from Piotnet can already deal with it: https://pafe.piotnet.com/sticky-header-demo-3/
Cheers.
—
Laurent
-
This reply was modified 4 years, 4 months ago by
laurentfa.
Thanks for the info. Astra pro also has this feature. I’ll take a look at their methods and see if they might be helpful.
I’m already using JavaScript to add css classes for the scroll distance. It should be just a small modification to the JavaScript for direction rather than distance and then simply setting up the css selector attributes. I plan on using “slide in/out(up/down)” for the transition and adding options to adjust transition duration.
I’m open to any suggestions or input you might have. Hopefully I’ll have time to add this feature soon because several people have been asking for it lately.
I looked at the Elementorcodes example and it is very close to what I would do. The mypos > 40 used to show header when at the top of the page won’t be necessary for my situation as the selectors aren’t even applied to the header until a specified distance.
I’ll see if I can modify their code to something people can use until this feature is officially added. Thanks for the link
Thank you, Robert. I’m glad it helped.
—
Laurent
@lfalipou
You can create an elementor HTML element or use a plugin to add this code to your page to achieve this effect. No additional steps needed.
Here is a demo of it working
http://testing.robertwattner.com/
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 600) {
if(mywindow.scrollTop() > mypos)
{
$('.she-header').addClass('headerup');
}
else
{
$('.she-header').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
});
</script>
<style>
.she-header {
-webkit-transition: transform 0.4s ease !important;
-moz-transition: transform 0.4s ease !important;
-ms-transition: transform 0.4s ease !important;
-o-transition: transform 0.4s ease !important;
transition : transform 0.4s ease !important;
}
.headerup{
transform: translateY(-500px); /*adjust this value to be GREATER THAN THE HEIGHT OF YOUR HEADER SECTION*/
}
</style>
**Remember to adjust the “600” in (mypos > 600) to HOW MANY PX FROM THE TOP TO ACTIVATE DISAPEARING EFFECT
I left that variable in there in case you wanted this to activate after the shrink effect. Let me know if this works for you.
*******PLEASE REMOVE THE “!important” AS IT BREAKS INITIAL BACKGROUND COLOR CHANGE TRANSITION
************************************************************************************
REVISED CODE WITH NO BUGS(SO FAR)
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 600) {
if(mywindow.scrollTop() > mypos)
{
$('.she-header').addClass('headerup');
}
else
{
$('.she-header').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
});
</script>
<style>
.she-header {
-webkit-transition: transform 0.4s ease, all 0.4s ease !important;
-moz-transition: transform 0.4s ease, all 0.4s ease !important;
-ms-transition: transform 0.4s ease, all 0.4s ease !important;
-o-transition: transform 0.4s ease, all 0.4s ease !important;
transition: transform 0.4s ease, all 0.4s ease !important;
}
.headerup{
transform: translateY(-500px); /*adjust this value to be GREATER NEGATIVE THAN THE HEIGHT OF YOUR HEADER SECTION*/
}
</style>
Thanks Robert (@rwattner).
Don’t worry, I’m not in a hurry. I can wait for you to take the time you need to implement this additional feature in your plugin.
But thanks a lot for coming up with a solution as soon as you could.
I really appreciate it :-).
—
Laurent
