Show Hide the Header on Scroll - Free Code - Elementor Wordpress Tutorial

[@arijacko]

Thank you! I got confused with your previous version, but this one was great because you specified that we must change the effects offset ourselves in the CSS snippet to see the change

[@vincemahama]

Absolutely zero issues. What a fantastic tutorial. Thanks a million

[@websquadron]

Glad it helped!

[@derleuchtturmwarter5866]

You always have the best topics in elementor and web stuff!

[@Greg.Mika.]

To deliver such level of content with such consistency is just uncanny! Keep on Imran 🤟

[@antoniogarcia9271]

Thanks Imran. It works great. Added to the toolbox. Have a great rest of your day!!

[@markbratton111]

And the beauty of it, of course, is that the code always remains here. No worries in it being in your customizer where it may get lost in the shuffle.

[@akkouk]

Great and easy solution! Is there a way for this to be enabled only on mobiles? I mean on the desktop the header to stay sticky on scrolling down but on mobile to work like it works on your tutorial?

[@websquadron]

You'd have to wrap the code to only work when the @media is

[@kelvinnga295]

can we have different way. the sticky. after the page scroll up.100px than appear the sticky nav ? if the page go top disappear sticky nav ?

[@npc-br]

That's my guy just right there!

[@JulienPop]

Great tutorial thanks !

[@ameti-psa]

Great work. This is line 17 of your code '; and those symbols after bracket appears under footer, for me worked just removing them but not sure if its good way. Let me know if it is ok.

[@06Smoker]

Hello Imran, Thank you for your hard work and such great content. I have two little issues with this one : - The header when scrolling up is totally disappearing on Safari, really weird. - Not working on mobile, it's stay sticky unfortunately... Thank you for your help on this you're the boss!

[@cassandrad07]

Did you find a solution for it disappearing on Safari??

[@JoeKnaggs-d8b]

So I had GPT try and solve the safari disappear issue. It seems to be working fairly well. Not perfect as there is a slight little jump but better than it disappearing completely. A slight adjustment to the JS. Give it a try and let me know if it works. add_action('wp_footer', 'custom_hide_header_script'); function custom_hide_header_script() { ?> (function() { var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; // Get the header element var header = document.getElementById("scrolling-header"); // Always show the header at the top of the page if (currentScrollPos === 0) { header.style.top = "0"; } else if (prevScrollpos > currentScrollPos) { header.style.top = "0"; // Show header when scrolling up } else { header.style.top = "-100px"; // Hide header when scrolling down } prevScrollpos = currentScrollPos; } })();

[@BenBaudart]

I can see that like me some people are having issues with the header width when resizing the window horizontally (smaller then wider). The header then stays in its smaller width. There are 2 fixes, for both you need to update the custom CSS rule you created for the header. Solution 1: As commented on the previous video by @06smoker, update to : .scrolling-header { transition: all .5s ease !important; width: 100% !important; } Solution 2: Mine, change the 'all' to 'top' in the transition as it's interfering with another transition property : .scrolling-header { transition: top .5s ease !important; } Hope it helps someone else …

[@websquadron]

Many thanks

[@trntzx00]

Thanks!!!!!!!!

[@keptLV]

Hey. The header seems to hide when you scroll back up to the very top of the website on a mobile. Is that supposed to happen?

[@PerhapsFilms]

@@keptLV did you find a solution?

[@visualmodo]

Truly good work ==DD

[@gordonblackler2377]

Thanks once again for a great tutorial! Could you also find a way of creating a sticky header without using Elementor Pro or the premium version of an add-on plugin. Searching the WP repository, it seems that every plugin with a header / footer builder only has the sticky top as a paid feature. In many cases, I don't need 90% of the widgets they offer - I just want a sticky top. Any suggestions?

[@websquadron]

I'll have a think, but using EL Pro is a massive time saver on many 3rd party plugins. Let me have a think.

[@ektopicbeats9070]

very nice. I don't know if you can help off the top of your head... You know the loop grid tutorial you did recently with the text path and image mask - the circular one, how do I stop the text path text from lazy loading, It's really bugging me. I've tried fiddling with the phastpress settings and turning off WP meteor - no joy. I am also using your Stop Lazy Load code snippet. Am I missing something? I feel like it's unusable the way it is at the moment. Cheers bud

[@websquadron]

Can you share the URL with it loaded? It shouldn't have any delay. Do you still get the issue on a new page that contains nothing else except the loop grid.

[@ektopicbeats9070]

Hey Imran, hope you are well. Thanks ever so much for the reply, I understand you are a busy man. I've been using Pods for a dynamic title, so I just changed it to a normal title and it loads fine without delay, I've changed it back to Pods, and now sometimes it loads fine, and others it loads on page scroll. The problem must be with pods. loading on page scroll is better than it was. I really appreciate you taking the time to reply to my message.👍@@websquadron

[@holliswebb1800]

that's slick!!

[@rogerio8710]

Obrigado pela aula. Agora, se eu quiser colocar um cabeçalho como esse só que na parte de baixo do site e com algum atraso na exibição tipo: depois de rolar a página 500px, seria do mesmo modo?

[@multa7053]

Xin lỗi, tôi chỉ nói được tiếng Việt

[@websquadron]

You’ll have to test it but I’ll check when I get a chance

[@philwatson8694]

Hi Imran, I've gone through the tutorial and added the code to snippets and the css to the parent container of a header template. For some reason it's not working - the header doesn't work responsively any more, with white gaps either size. Any ideas for a fix for this? Thanks for making such great content, if I can get this to work it's just what I need.

[@websquadron]

Let me check

[@philwatson8694]

@@websquadron thanks

[@german.borrello]

hello Imram.I had a problem yesterday with paying for the course with my credit card. Today I try to do it again but it no longer takes the discount coupon.

[@websquadron]

Can you wait for a few hours and I will open the coupon for another 24 hours.

[@duckapucko6395]

For some reason the offset effect doesn't work for me at all. The JS kicks in immidiately after scrolling 1px... I'm also using a "section" instead of a container for my header - does that matter? It feels like the code should work anyways... Please help me!!

[@websquadron]

Shouldn’t matter. It’s a weird one as to why some have an issue with it

[@pawegabski5422]

What to do when I have before header one more header? When scroll to the up that the second header hide this first header.

[@websquadron]

That would be tricky unless you add them all into one header

[@dan_kay]

In tablet mode, I can see the edge of the parent container when I scroll down. It doesn't disappear completely. In mobile mode, it stays sticky, no matter what. Any ideas?

[@websquadron]

I’ll have to check but when I tested it was fine

[@rafiqraina4475]

This works good for Pc but on ipad and mobile this has a bug. As when we go the top of the page fast the header vanishes

[@PerhapsFilms]

hey man I'm having the same problem! did you find solution?

[@JoeKnaggs-d8b]

@@PerhapsFilms As am I, definitely a big downfall as jumping to the top of the page to get to the nav on mobile is a very common UX.

[@markbaquerizo6190]

When you go to the bottom it creates a blank space on canvas template, can you update the code to delete that space, please. Check it out.

[@websquadron]

I'll check as I don't recall that being there

[@markbaquerizo6190]

@@websquadron add_action('wp_footer', 'custom_hide_header_script'); function custom_hide_header_script() { ?> (function() { var prevScrollpos = window.pageYOffset; var scrollingHeader = document.getElementById("scrolling-header"); if (scrollingHeader) { window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { scrollingHeader.style.top = "0"; } else { scrollingHeader.style.top = "-" + scrollingHeader.offsetHeight + "px"; } prevScrollpos = currentScrollPos; } } })();

[@cassandrad07]

When I scroll all the way back up to the top on Safari, the header completely disappears. Any idea how to resolve this??

[@websquadron]

It should remain

[@cassandrad07]

@@websquadron it doesn't. I followed the tutorial to the tee. Could I email you?

[@capitanchorizzo]

CSS does not go into Code Snippets free version …

[@websquadron]

The JS goes there.

[@capitanchorizzo]

Thanks, figured it out right after posting …@@websquadron

[@kylequinn5629]

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?

[@websquadron]

Difficult as I’m assuming it’s the build?

[@kylequinn5629]

​@@websquadron It has to be something wrong with the build since I have tried to make the same hide + show header using other methods (I used the HTML widget, and tried using elementor custom code as well) and the same issue still happens. My site is only 1 page and I made my header as a template that I imported to it. Would this be a reason why this is happening? Do you have any other Idea of why this might be happening, or if there is someone I can reach out to about this? I have been looking for answers on how to solve this for a while now and feel like I have run out of options..

[@kylequinn5629]

Any Idea why this is happening? As I have seen comments on here where this happens to others as well.

[@porkchopsanddoobies]

Any idea how to do this on mobile?

[@websquadron]

Is it not working for you on the mobile?

[@porkchopsanddoobies]

@@websquadron For some reason it is now but acting a bit buggy with the hide aspect. Its currently not hiding anymore. Im attempting to use two headers, one for larger screens, desktops, laptops etc and one for mobile. Would I be able to use the same process you provided or would I need to separate the two somehow with CSS Classes or something? I really appreciate your videos and thanks so much for your time and help.

[@SmartServe_official]

The code is different and does work sadly. Can you please help?

[@websquadron]

Use this as there was a problem with the online one. That has now been replaced: (function() { var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("scrolling-header").style.top = "0"; } else { document.getElementById("scrolling-header").style.top = "-100px"; } prevScrollpos = currentScrollPos; } })(); ';

[@lushprod]

doesn't work for me

[@websquadron]

How so, as it works for me? Have you inspected for console issues?

[@lushprod]

@@websquadron the nav goes down and i put in the correct css etc, nav doesn;t go up. no worries found an other one

[@06Smoker]

@@lushprod Hello, which one is the other one you find please?

[@MrJohnboom]

Hi Imran, posted already a comment in your other video kzbin.info/www/bejne/jaa6fZJ4g96bnLcsi=wYcjsuDVp4U5tzvJ since it is exactly the same code snippet that you previously used, is it still breaking the menu when you are changing screen display on developer tools or with tablet from portrait to landscape mode? "Have you tried playing with the developer tools from chrome and manually adjust the width from smaller screen to bigger screen and vice versa with this snippet? Very strange behavior that shrink the header.. Same problem occur while using a tablet and turning it few times to pass from a portrait to a landscape mode. The menu will break and need to refresh.."

[@adrian.fernandes]

Agree. Have this same issue.

[@websquadron]

Is your menu changing in height when you change orientation?

[@MrJohnboom]

@@websquadron Sent you an email with a different snippet that fix the bug :)

[@adrian.fernandes]

@@websquadron yes the height changes on mobile and tablet.

[@websquadron]

@@adrian.fernandes use this JS instead: add_action('wp_footer', 'custom_hide_header_script'); function custom_hide_header_script() { ?> jQuery(document).ready(function($) { var prevScrollpos = window.pageYOffset; var header = document.getElementById("header-2"); window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { header.style.top = "0"; } else { header.style.top = "-" + header.offsetHeight + "px"; } prevScrollpos = currentScrollPos; }; });