I recommend you use Transparent header for your first page. It will be better than hide it.
To enable the transparent header for your first page, please go to Pages > All Pages > edit your frist page > scroll down and check option for enable header transparent on "Header" tab - check this image.
It works well in some way, but the menu area is still there (which I could fix with changing margin), but another thing is that all animations (Lottie json-files) on my website disappeared. :-/
If it happened like so, I think there is a conflict between Elementor Pro version as you're using with the php codes I sent.. So, I think at this moment, no way to do your requirement..
I would like to hide the top menu on my first page and that it appears when scrolling the page. How can I do that? I guess CSS?
/Charles
Hi,
I recommend you use Transparent header for your first page. It will be better than hide it.
To enable the transparent header for your first page, please go to Pages > All Pages > edit your frist page > scroll down and check option for enable header transparent on "Header" tab - check this image.
Best Regards,
PenciDesign
Thanks, but not what I'm looking for. I would like to have it hidden when you visit the first page but then visible when the user scroll the page.
Hi,
Ok, if you still want to do that, please do following steps:
1/ Add more this code to the end of functions.php file:
add_action( 'elementor/frontend/before_enqueue_scripts', function(){ wp_dequeue_script( 'elementor-sticky' ); wp_deregister_script( 'elementor-sticky' ); });like on this image
2/ Add more this code to Customize > Custom CSS:
body.home .sticky-wrapper{ visibility: hidden; } body.home .sticky-wrapper.is-sticky{ visibility: visible; }Best Regards,
PenciDesign
Thanks for the help.
It works well in some way, but the menu area is still there (which I could fix with changing margin), but another thing is that all animations (Lottie json-files) on my website disappeared. :-/
Hi,
Ahh, sorry, please try change the custom CSS I sent to this code:
body.home .sticky-wrapper{ visibility: hidden; display: none; } body.home .sticky-wrapper.is-sticky{ visibility: visible; display: block; }Best Regards,
PenciDesign
Unfortunately it seems the code for the functions.php is the problem, not the css.
Hi,
No - Let's change the CSS as I said and remove the margin-top -82px on the slider section on your homepage. This issue will be solved.
Best Regards,
PenciDesign
Still problem with all Lottie json-animations gone. Don't know why the php-code does that.
Hi,
If it happened like so, I think there is a conflict between Elementor Pro version as you're using with the php codes I sent.. So, I think at this moment, no way to do your requirement..
Best Regards,
PenciDesign
Thanks for trying :)
/Charles