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

Подписаться 68 тыс.

Просмотров 10 тыс.

50% 1

Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
The JS to add is here: codesnippets.cloud/snippet/We...
The CSS to add is:
.scrolling-header {
transition: all .5s ease!important;
}
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your RU-vid Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Хобби

Опубликовано:

30 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@vincemahama 3 дня назад

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

@websquadron 3 дня назад

Glad it helped!

@arijacko 6 месяцев назад

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

@derleuchtturmwarter5866 9 месяцев назад

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

@antoniogarcia9271 9 месяцев назад

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

@Greg.Mika. 2 месяца назад

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

@JulienPop 9 месяцев назад

Great tutorial thanks !

@markbratton111 9 месяцев назад

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.

@visualmodo 8 месяцев назад

Truly good work ==DD

@holliswebb1800 8 месяцев назад

that's slick!!

@chilipalmer1904 7 месяцев назад

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.

@npc-br 2 месяца назад

That's my guy just right there!

@kelvinnga295 5 месяцев назад

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 ?

@akkouk 5 месяцев назад

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 5 месяцев назад

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

@BenBaudart 8 месяцев назад

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 8 месяцев назад

Many thanks

@trntzx00 7 месяцев назад

Thanks!!!!!!!!

@keptLV 5 месяцев назад

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?

@gordonblackler2377 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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

@rogerio8710 9 месяцев назад

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 9 месяцев назад

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

@websquadron 9 месяцев назад

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

@duckapucko6395 7 месяцев назад

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 7 месяцев назад

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

@pawegabski5422 8 месяцев назад

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 8 месяцев назад

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

@Growdigitalmindset 9 месяцев назад

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 9 месяцев назад

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

@philwatson8694 2 месяца назад

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 2 месяца назад

Let me check

@philwatson8694 2 месяца назад

@@websquadron thanks

@dan_kay 8 месяцев назад

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 8 месяцев назад

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

@markbaquerizo6190 7 месяцев назад

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 7 месяцев назад

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

@markbaquerizo6190 3 месяца назад

@@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; } } })();

@SmartServe_official 9 месяцев назад

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

@websquadron 9 месяцев назад

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; } })(); ';

@kylequinn5629 7 месяцев назад

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 7 месяцев назад

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

@kylequinn5629 7 месяцев назад

@@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 7 месяцев назад

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

@capitanchorizzo 8 месяцев назад

CSS does not go into Code Snippets free version …

@websquadron 8 месяцев назад

The JS goes there.

@capitanchorizzo 8 месяцев назад

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

@porkchopsanddoobies 5 месяцев назад

Any idea how to do this on mobile?

@websquadron 5 месяцев назад

Is it not working for you on the mobile?

@porkchopsanddoobies 5 месяцев назад

@@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.

@MrJohnboom 9 месяцев назад

Hi Imran, posted already a comment in your other video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WuWL_BNyhfU.htmlsi=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 9 месяцев назад

Agree. Have this same issue.

@websquadron 9 месяцев назад

Is your menu changing in height when you change orientation?

@MrJohnboom 9 месяцев назад

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

@adrian.fernandes 9 месяцев назад

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

@websquadron 9 месяцев назад

@@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; }; });