Menu
Elementor Change Header on Scroll With Smooth Animation
No extra plug-ins required! Elementor Pro Required.
To begin with, create your new header in a new section
It can be anywhere on the page. If you want the changing header on scroll on every page, then create it in your header template. Header templates are a Elementor Pro feature.
Then, give that section a CSS ID of ' menuhopin ' and a Z-Index of 999
Finally, simply add the code below in an HTML Element
Adjust the transform:translateY value at the bottom of the code to match the approximate height of your header.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 300) { /* change this value here to make it show up at your desired scroll location. */
$('#menuhopin').addClass('headershow');
} else {
$('#menuhopin').removeClass('headershow');
}
});});});
</script>
<style>
.elementor-nav-menu__container{
top:0px!important;
}
#menuhopin.headershow{
transform: translateY(0);
}
#menuhopin{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>
If you want your menu to show up only on desktop or mobile, simply use the Responsive settings
If your menu is an horizontal bar at the top of the page, the above code will work perfectly
For any other placement, modify the CSS. If it needs to appear below something else, change the top: 0; value. If it is placed to the left or right of the page, remove width: 100vw; and add left: 0; .
Outstanding. Easy to setup, works like a charm. Thanks!
Welcome!
Hey quick question, where does the HTML element go on the page? I tried to implement but the new navbar just stays on the page and there are no effects observed on scrolling.
Update: it works now but my old header doesn't disappear upon scroll so the two headers just overlap.
Michael Chan Hello Michael! You other header should not be set to 'fixed' or 'sticky' anymore. It should just be set to show up normally, at the top of the page!
Hey Michael, can you tell us what you did to fix your issue? I can't seem to get my header to work and I suspect that it's because the html element is not placed in the correct space.
Alexander Green I always put the HTML widget it in the footer so it applies to all pages
Thank you for this script. Just one question on loading we see the second header for microsecond. What can i do to fix this ?
Move the CSS part of the code to somewhere where it will load before the header ( for example in the wordpress customizer > additional CSS )
Thanks for this but you need to be a lot clearer.
For example just say " This effect works by using two sections to create the effect.
First, create a new section (or use your current one) like you would with any header. Add your menu widget, logo etc. (Note: Don't add any sticky effects, when the page scrolls up this section acts like any section normally does)
Add a 2nd new section (or duplicate the previous one) and style it. It can be placed anywhere on the page or in your header template. Give it an ID name "menuhopin" with a z-index pf 999. This section is what appears when the page scrolls creating the illusion of swapped headers.
Using the HTML widget, paste the code below etc.
But thank you, amazing!
hey, i get an error when adding this script - 403 forbidden why?
Probably just your security plugin... put WordFence in learning mode for a bit!
Hello, can i change the code to make it in reverse, i mean when the page open apears my header and when i do scrool the header hide? sorry my english.
What you describe is the default behaviour for 100% of headers on all websites...
Hey Maxime, such an elegant solution. Thank you!
Quick question:
I'm using your script to display a sticky header for mobile devices. My "menuhopin" has a nav menu element that brings in a menu panel (sliding-in from left to right).
Problem is that this menu panel is only visible within the area of the sticky header, those few pixels on the top of the page. I tried playing a bit with the Z-index of the "menuhopin" (888) and my nav menu element (999), but this didn't solve the problem.
Any ideas would be greatly appreciated!
Thanks!
C.
Hey Christos!
Really difficult to say without seeing the page. Sounds a bit to me like it might be an overflow problem maybe? Do you have overflow set to default on your sticky header section?
Turns out it was a mistake of mine, a duplicate css snippet somewhere... All good now, many thanks!
Thanks allot for this tutorial.
The header works as expected on safari. It swaps smoothly and perfect on safari. The slide in animation is smooth a works the same as in desktop.
--
Still jumpy on *** Mobile Chrome. I's there any solution for that?
Thanks
Thanks a lot for this tutorial. The header works as expected as you explained. I'm looking forward to the YouTube tutorial, on how to shrink the logo on scroll. Using ''HTML only...''. Rest condition remains the same.
Stay Blessed
Welcome!