Show-hide Header on Scroll in Elementor PRO

hello everyone all boys here with another element of pro tutorial today I'm gonna teach you how to create the website header that shows and hides as you scroll more precisely the header that hides when you scroll the page down and shows back if the page is scrolled up you all have seen that detail before and I can bet many of you wonder how it can be done in elementary it's actually quite easy with just a little bit of JavaScript help of course don't worry it's a copy page thing that doesn't require any coding knowledge I prepared everything and the length to the J's file to the code file is in a description below if you wish you can also download this tutorial training files for a small fee and thus help me keep this channel alive all the details are in the description below as well so let's get started first of all I'm gonna delete the existing header on this page and start all over this is actually another real header template but rather the section with two colors that I'm using to mimic the hell navigation is not the real one too as you can see why am I not using the real header template because this is how I keep everything on one page and you can see how things work right away otherwise I will need more than one elementary editor screen open and the most likely switch between screens refresh screen upon save and which might be distracting or even confusing of course you ain't gonna create any quasi header for your website but actually apply what I am teaching you here to your own elemental header template okay this is meant to be used in a Harry template unless you're building one page website all right the quasi header is ready first and foremost we have to assign CSS ID or a class to our header I'll rather go for CSS ID but if you for some reason prefer CSS class that's fine to you the only thing that you have to take care of is uniqueness or otherwise be sure that the class you assigned to the header element is not used elsewhere by some other element of page the ID must be unique as well or your code will not pass validation so with the header section highlighted open Advanced tab advanced panel and type in show/hide Heather into the CSS ID input field that very ID will be used by JavaScript and I'll let you know about once we get to that point the next important step is to make the header sticky with the header section highlighted Advanced tab open expand motion effects panel then from the sticky drop-down choose top and that's it no need to do anything else here as I said at the beginning we'll need a level push from JavaScript in order to create desire effect for our hell it's simply because there is no other way to make it work properly and the only way to add and run JavaScript in elemental Pro is by using the HTML widget that's why I'm going to drag and drop the HTML widget to the menu column I could also use the logo column but it actually doesn't make any difference that widget is going to house require JavaScript code that's all it shouldn't take any space or effect surrounding elements moreover I made the HTML budget absolutely position and are going to assign inline words to it so it'll have a minimal visual impact by doing so I'll be able to remove the widget to any position you see I can move it left or right top and bottom it doesn't matter the whole point is to make it visible accessible and not make it overlap any other element of the page header it's there and it's not there in the same time so to speak okay all that is left now is to add required JavaScript code I'm simply going to copy paste the entire code and that's exactly what you should do as well as I said at the beginning the link to the code file is in a description text of this video and here's the code that I had prepared I ain't gonna bother with explaining the code in details I'm just gonna say that it does the job decently I have created the code to the best of my knowledge and the most important is that you don't need to mess up with the code to make it work all right you only think that you should memorize is the line number 12 why because this is real the reference to our header is created if you recall the CSS ID of our header is show/hide hair just like here so in case you used or you plan to use different ID for your header the line number 12 is what you must update okay the CSS ID of the header must correspond to what's written in the line number 12 let's try to scroll the page and see how the things look like yeah as you can see it works perfectly the hair hides whenever you scroll the page down and comes back into view when the opposite scrolling direction takes place we can also check whether all is good in responsive mode so the tablet first it's okay please don't pay attention to the menu items this is not a real man you and as such it's not affected by elements with responsive breakpoints next to the mobile yeah it looks right except the quasi menu but this also can be taken as an evidence that hell shows and highs properly regardless the height you and that's it once again you can download the training file for a small fee from the link in the description below and as help me keep this channel alive if you liked this tutorial give me a thumbs up comment share spread the word anything you do will be fine and if you do so I'll give my best to publish more videos stay tuned thanks for the support

Channel: Oooh Boi

Views: 71,538

Keywords: hide menu on scroll, hide header on scroll, auto hide navbar, show hide menu on scroll, show hide header on scroll in elementor, elementor tutorials, elementor tips, elementor tricks, elementor how to, elementor design tips, design tricks, complex layout elementor

Id: HBP2TpI1rjU

Length: 6min 16sec (376 seconds)

Published: Sun Dec 29 2019