Sticky Header Hide and Show on Scroll - Elementor Wordpress Tutorial

No video

Sticky Header Hide and Show on Scroll - Elementor Wordpress Tutorial - Sticky Top Header Template

Рет қаралды 39,881

Күн бұрын

Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
Code for Code Snippets:
codesnippets.c...
CSS Code for Transition:
.scrolling-header {
transition: all .5s ease!important;
}
Sticky Header Hide and Show on Scroll - Elementor Wordpress Tutorial - Sticky Top Header Template
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZfaq Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 149

@erickson.scarlet 3 ай бұрын

You've saved me again bro. You are a legend. Getting that notification bell turned on

@websquadron 3 ай бұрын

Glad to hear it

@paulburgess4954 11 ай бұрын

One by one I'm adding these little gems to my site, these snippets are really eay to apply. Never thought I'd be using CSS but you explain how things work so well 👍

@websquadron 11 ай бұрын

Glad you like them!

@daniel.trapanese Жыл бұрын

Great Stuff Imram. Quick, simple, very useful, and no fillers. Love your content. Keep it coming mate!

@markbratton111 Жыл бұрын

Thanks! I really dig this plugin. It has opened up my whole world in Elementor. Great stuff as usual, Imran!🙂

@oscarmartinlive 11 ай бұрын

I had to subscribe to your channel and turn on notifications right after watching this video. So powerful and helpful. Thank you.

@pezreloaded8436 Жыл бұрын

Thanks for another awesome helpful vid. Code Snippets quickly becoming my new BFF.

@SquirrelRock Жыл бұрын

You do Such a wonderful job of explaining these things. Thanks for your great insights and fabulous tips!

@websquadron Жыл бұрын

Thank you so much!

@trinib1 Жыл бұрын

nice work . I FOUND ANOTHER EASY SOLUTION !! instead of using snippet plugin and header template which i cannot get in free Elementor, so using the regular menu header, we can create a JS file with script, custom CSS and then implement HTML script tag in header php which will achieve to same results even with animations like fade in or slide in from the top or the left.

@trinib1 Жыл бұрын

Ah I forgot to mention i added js script on separate file which was created in ftp . I guess people can use code snippet plugin with JS code for beginners

@websquadron Жыл бұрын

Cool

@websquadron Жыл бұрын

Nice

@bySterling Жыл бұрын

Awesome and great touch w the transition

@webtappers7863 Жыл бұрын

Thanks for sharing these very very useful tips & tricks to make UX better!

@salmanrazakmemon Ай бұрын

Zabardast :)

@christhjian9923 3 ай бұрын

This works great. But what if I would like it to hide after, let's say 4 scrolls? I could not figure out how to do it. Does anyone have ideas?

@rakibulhashan4682 Жыл бұрын

Very Good Imran!

@RicardoMiqui 9 ай бұрын

Absolutely priceless!

@toineenzo Жыл бұрын

Awesome!! I really need this. Could you maybe make a tutorial that makes the logo smaller when you scrolldown? Like the default effect that is in Divi theme.

@toineenzo Жыл бұрын

Nevermind you already have a tutorial for that: kzfaq.info/get/bejne/idt-qZd5uM6xqmw.html Will try out to see if it still holds with container and 3.14

@visualmodo Жыл бұрын

Truly good job! =D

@PabloAlbaBur 8 ай бұрын

Thanks, a success and easy to implement

@user-wp8uz5sy2b 7 ай бұрын

Sweet, thanks!

@harbourdogNL Жыл бұрын

I'm doing this, thank you.

@mazmahjoobi Жыл бұрын

Thank you! I'm having a problem when resizing the browser width. When I load the site at let's say 600px width and then resize the window too let's say 1200px the header stays at 600px and is just centered in the page and won't resize with the rest of the page. Is this just me or does this happen for everyone?

@mazmahjoobi Жыл бұрын

Ok, I just found a fix for this if anyone else is having the same issue. Just add this custom CSS: .scrolling-header { width: 100% !important }

@06Smoker 11 ай бұрын

@@mazmahjoobi Thank you so much you helped me to fix this big issue ! :)

@multa7053 Жыл бұрын

Legend!

@mandalsubha06 Ай бұрын

A very very useful code snippet indeed. But my transparent header is disappearing when I scroll to the top of the website. Is there a fix?

@muhammadhaseeb1965 Жыл бұрын

Sir you are great

@fahadnazir6271 9 ай бұрын

Its Helpful

@chathurajayadinu Жыл бұрын

Thank you ❤

@shaanroy404 Жыл бұрын

thanks man

@fatjay9402 Жыл бұрын

Great!

@arijacko 7 ай бұрын

Worked well but is now broken - effects offset not working at all now

@websquadron 7 ай бұрын

I dod am updated vid 3 months ago: kzfaq.info/get/bejne/gtJgmKSWu8-lhWw.htmlfeature=shared

@jimkody5288 Жыл бұрын

When I scroll back up, half of the header is missing (i.e., the entire height of the header is not restored). My header height is 120px - and I've specified that in the JS and and effects offset. What am I doing wrong? I have to refresh (F5) in order for the full header to display. Noting that it works in the backend / preview, but not when viewing the site.

@websquadron Жыл бұрын

Can you share a url?

@jimkody5288 Жыл бұрын

@@websquadron I don't know what is going on. I sent the URL 3 times in the comments -- come back 5 minutes later and it is gone.

@kylequinn5629 9 ай бұрын

I am running into the same issue as well. Has anyone figured out why this happens and how to fix it?

@michajagosz1343 8 ай бұрын

Thank you for sharing! It's great, however I noticed one issue on mobile browsers (safari and firefox on iOS). I use this solution for mobile menu sticked to the bottom edge. Once I scroll up it shows up, but one I hit the top of the page it disappears. Do you have any fix for that? Maybe it is caused by that browser effect of dragging the screen a bit above the page (to refresh) which actually make the site goes a little bit down (like scroll) when I release a finger.

@kayadelfgaauw5116 4 ай бұрын

Hi, I happen to have the same issue. Have you found a solution for it yet or not?

@Downhiller-wu3pn 11 ай бұрын

When I scroll down a bit and then back up to the top, the click area is moved from my navigation. Does anyone have a solution?

@websquadron 11 ай бұрын

I'm going to re-explore this soon

@Downhiller-wu3pn 11 ай бұрын

@@websquadron its good now somehow. But now i have a new issue - when i scroll up, it doesnt have the same distance to the top as before. My nav is closer to the top screen then. Is this a known issue? Or maybe an Elementor bug?

@taino7543 Жыл бұрын

for some reason, when I scroll up the header only comes down half way, not showing the top of the header.

@websquadron Жыл бұрын

Any negative margin, or VH for the page?

@jimkody5288 Жыл бұрын

I have the same problem

@notapplicable4283 5 ай бұрын

Mine automatically does this, and I can't take it off as I want the menu to just stay?

@advanced-developers Жыл бұрын

good

@baliflorent6971 Жыл бұрын

Thanks Boss. Can you do a tutorial on essential WordPress hooks and how to add a code snippet to manipulate it.

@websquadron Жыл бұрын

I'll have a think :)

@adamhharbin 9 ай бұрын

This works great everywhere except safari. On Safari the header hides as default when the user scrolls back to the top of page. It appears a bit glitchy.

@prerakmehta9827 Жыл бұрын

Hey Iman, love your videos. I have a question, as a freelancer is it my responsibility to manage the order and inventory of e-commerce website that I build for my clients? If no then can I charge a monthly recurring service charge for maintaining orders, generating invoices etc.? Would love if you can over this topic in a separate video Also planning to purchase your course. Super excited to start my web design agency business!!!

@websquadron Жыл бұрын

Charge as you’re giving up your time

@MadMarcTV 4 ай бұрын

When you minimize the screen, then maximize again in Google Chrome, the header gets squished.

@harbourdogNL 5 ай бұрын

I'm trying this with a parent container containing 2 child containers (first child contains two buttons, second contains image widget and WP menu). Following your instructions, the top child disappears, but the lower one remains visible as the user scrolls. Thinking it may be a z-index issue, I gave the parent an index of 10, but result was the same; I gave the child containers z-indexes of 10 as well to see if that worked, but result is the same. Any idea how to make the 2nd child container disappear as well?

@websquadron 5 ай бұрын

Difficult to be sure without seeing the site as part of a consultation

@sg_vloggs Жыл бұрын

Hi. Thanks. How to change background color on scroll? Addition to CSS code: .scrolling-header { transition: all .5s ease!important; width: 100%!important; }

@EPHONIC Жыл бұрын

The addition you've made with 100% on the width is a huge help. Thank you. The width was getting stuck and I would have to refresh the page but it seems to be fixed now without needing to refresh.

@douglascapron9814 Жыл бұрын

Excellent. Could this also be achieved for the footer, revealing it on scroll?

@websquadron Жыл бұрын

Good question. Let me probe and check.

@harshilvora8 Жыл бұрын

Hey! Thank you so much for this! How do I make this work for 2 headers - one for Home and the other for the Rest of the Website?

@websquadron Жыл бұрын

Make a copy of the snippet, but change the ID used, and the ID/Class Name in the Container.

@harshilvora8 Жыл бұрын

@@websquadron I did try that, but for some reason that doesn't work. Only one of them works at any time, even with both snippets active. I did change the function name (as it can't call 2 functions simultaneously) and the class and ID of the container in Elementary Editor and the Snippet.

@gianmarcogiuliarig Жыл бұрын

excelent my friend but what about if I have a transparent header and when I scroll up need to put color to the header? thanks!

@websquadron Жыл бұрын

See this: kzfaq.info/get/bejne/gZ13a8mQ3q-qgWw.html

@thomaslevack 11 ай бұрын

Thanks! another informative clip. I'm having an issue with Safari. the container comes down but the menu widget scrolls back up and then wont come down. Any suggestions??

@websquadron 11 ай бұрын

Difficult to be sure without seeing it. What else is active on the page, in terms of addons or optimisation scripts?

@jackelies9947 5 ай бұрын

Can I add shadow to the header when it shows on scroll? And how can I do that

@websquadron 5 ай бұрын

That'll need some extra shadow css to show after some offset has been applied.

@MrJohnboom Жыл бұрын

Have you try 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.. Happy to provide screenshots to your email if needed :)

@websquadron Жыл бұрын

I’ll have a look

@kabbalahhealing 11 ай бұрын

Also getting this issue...did you find a solution?

@MrJohnboom 10 ай бұрын

@@kabbalahhealing sent an email to Imran with an updated snippet that fix this bug.

@websalve6134 10 ай бұрын

@@MrJohnboom i got it with width 100% !important

@BenBaudart 10 ай бұрын

@@websalve6134 Thank you, it worked. But I ended up doing it differently by changing 'all' to 'top', like this: .scrolling-header { transition: top .5s ease !important; } width: 100% is then no longer needed ;)

@06Smoker 11 ай бұрын

Great tutorial thank you ! Just have a little issue when shrinking my screen and getting it back to normal my header size stay shrinked and not get back to normal... Is there a way to fix it? thank you !

@websquadron 11 ай бұрын

Have you got a URL with that activated?

@06Smoker 11 ай бұрын

@@websquadron I found the answer in the comments should be nice to add this info :) .scrolling-header { width: 100% !important Like this it's always stay nice even when shrinked and get back to normal :)

@SilverFOXO Жыл бұрын

Thanks for tip❤❤. But why did ya change the outro music? 😅

@websquadron Жыл бұрын

It’s just for Code Snippet videos :)

@voyarismus Жыл бұрын

This one did not suit me as my logo sag a little when i scroll down. How can i fit the height?

@websquadron Жыл бұрын

I’d need to see more details as part of 1-2-1. Tricky to solve without that

@qbeachview 7 ай бұрын

Thank you for this video :) My header is 150px tall which is a bit larger than most, and when I scroll down it doesn't completely hide. It hides most of it, but the bottom of the header is still visible after scrolling down. Do you know how to fix that? Thank you!

@websquadron 7 ай бұрын

Have you adjusted the offset values?

@qbeachview 7 ай бұрын

@@websquadron Thank you for the reply :) I have it at 100 as you suggested

@RaheelPatel_WP 11 ай бұрын

Greate tutorial as always , I followed all your steps carefully multiple times but it is always saying "Could not ❌create snippet. Request failed with status code 418"❌

@websquadron 11 ай бұрын

Sorry to hear that. What’s the host provider server?

@RaheelPatel_WP 11 ай бұрын

@@websquadron It is DreamHost

@kylequinn5629 9 ай бұрын

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?

@emmyrtgfx5738 Ай бұрын

how did you fixed that? I have the same problem

@f2fcoil 11 ай бұрын

Great tutorial, but on mobile the header disappears after loading and only appears back when scrolling down-up again

@websquadron 11 ай бұрын

Let me check that

@dafaRPR 9 ай бұрын

really helpful, but theres problem when i try to resize my browser for mobile view and back to desktop view the header stuck on small like in mobile view. is there any solution?

@websquadron 9 ай бұрын

Any other JS on the screen?

@dafaRPR 9 ай бұрын

@@websquadron it fixed now. from one of your comment, i just need to replace the css code for all to top

@zahidmahmood9046 10 ай бұрын

I have an issue.... when i scroll up, it only shows half of my header: my offsets are 80

@websquadron 10 ай бұрын

How did you build the header?

@user-te1oi7pg6x 9 ай бұрын

@@websquadron same issue hear. I built mine with elementors flexbox container, btw.

@kylequinn5629 9 ай бұрын

I am running into the same issue. Has there been a fix for this yet?

@mazmahjoobi Жыл бұрын

Thanks again Imran. I'm now having another issue. The header disappears with just a tiny scroll down, even just one pixel, which makes the top look weird! Is there a snippet that can be added so that we can choose how many pixels of scrolling it takes for the header to initially disappear? Thank you!

@websquadron Жыл бұрын

You can change the offset effects to be 100px

@mazmahjoobi Жыл бұрын

@@websquadron Thank you, where do I do that?

@EPHONIC Жыл бұрын

@@websquadron Having the same issue. All offsets are correctly set. Hmm?

@user-xf8tk8np2h Жыл бұрын

Dear friend, help me, do as you show in the video on the front of the site, the scroll disappeared what to do, please tell me

@websquadron Жыл бұрын

That will need a 1-2-1 consultation to delve into exactly what you did

@karolisbaltakis4509 9 ай бұрын

For me not working on mobile. Everything I did like in video. Any help?

@websquadron 9 ай бұрын

See this update: kzfaq.info/get/bejne/gtJgmKSWu8-lhWw.htmlfeature=shared

@karolisbaltakis4509 9 ай бұрын

I have two headers : one for mobile, second for tablet and mobile so for dekstop it is working for mobile no, Everything did the same

@mouadchadli5445 10 ай бұрын

Please how do I get the code it's no longer available in the link

@websquadron 10 ай бұрын

Corrected Link: codesnippets.cloud/snippet/WebSquadron/Elementor-Scrolling-Header

@RoyBizfrend Күн бұрын

Is this compatible in mobile mode?

@websquadron Күн бұрын

Yes

@jo5hdavis Ай бұрын

How can we make this work with the new mega menu?

@websquadron Ай бұрын

Same idea but place the mega menu in the Header.

@pengoat9 Жыл бұрын

Will it work on elementor - or just elementor pro ? Have been trying to get it working on elementor free version

@websquadron Жыл бұрын

Should work as long as you can apply the Effects Onset

@arturo5050 Жыл бұрын

This can be done i the new version of the Astra pro, in the theme?

@websquadron Жыл бұрын

Yes but when using Hello and wanting more control of your header layout this works better :)

@arturo5050 Жыл бұрын

@@websquadron It will have some conflict using elementor pro and astra pro for the header?

@edizkacmaz 8 ай бұрын

can i do that for only mobile devices?

@edizkacmaz 8 ай бұрын

i think i can

@websquadron 8 ай бұрын

Yes you can :)

@edizkacmaz 8 ай бұрын

@@websquadron but i guess the header part is available just for premium users so i couldn't do that

@inamullah4711 Жыл бұрын

it is great very great sir but there is a problem for iphone mobiles please check for it.. i am waiting for your reply i check on real mobile it is fine for android mobile but it is make a problem on iphone mobiles

@websquadron Жыл бұрын

I didn’t have a problem on the mobile. What was your problem?

@inamullah4711 Жыл бұрын

@@websquadron how I can send you image I will show you

@websquadron Жыл бұрын

@@inamullah4711 email me

@Brandvisionmedia Жыл бұрын

Does not work...

@websquadron Жыл бұрын

Are you using containers?

@user-he5ib1xd8j Жыл бұрын

Can you do it With the free version of elementor?

@websquadron Жыл бұрын

Yes you can in EL Free

@user-he5ib1xd8j Жыл бұрын

@@websquadron but elementor free does not give acces to CSS

@khaidiratz7958 Жыл бұрын

@@user-he5ib1xd8j the css are pasted in the code snippet plugin. Not elementor

@user-he5ib1xd8j Жыл бұрын

@@khaidiratz7958 He put a code in costum CSS on elementor at the end

@khaidiratz7958 Жыл бұрын

@@user-he5ib1xd8j man ur right...but actually you could put the code inside the plugin as well (or inside theme Customize CSS) You just have to find the class name (header) for it

@websalve6134 11 ай бұрын

Hey Imran, great vid, I've been looking for this effect for a wee while, glad I found it. Thank you. I've had one little issue on tablet and mobile which I can't seem to resolve. The container disappears right at the top of the screen and seems to only reappear and be sticky once you've scrolled down a little bit. Example vid here: kzfaq.info/get/bejne/hNN-mcSYy7C8o2Q.html

@websquadron 11 ай бұрын

Is there any offset effects applied there?

@websalve6134 11 ай бұрын

Hi Imran @@websquadron, not anymore...but it doesn't seem to have solved the problem. I instinctively feel it's something to do with the viewport resizing/url bar disappearing (but my instincts only prove correct

@timsimmons7916 Жыл бұрын

Mobile?

@websquadron Жыл бұрын

Is it not working for you?

@timsimmons7916 Жыл бұрын

@@websquadron My header dimensions are different, and I did adjust the values several times, but on mobile, there's a 30-ish px gap during the scroll back up.

@websquadron Жыл бұрын

@@timsimmons7916 Did you change the Effects OnSet to be 30 for the Mobile?

@websquadron Жыл бұрын

@@timsimmons7916 Or try this JS instead: add_action('wp_footer', 'custom_hide_header_script'); function custom_hide_header_script() { ?> (function() { var prevScrollpos = window.pageYOffset; var header = document.getElementById("scrolling-header"); window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { header.style.top = "0"; } else { if (window.innerWidth

@karolisbaltakis4509 9 ай бұрын

how to do that? @@websquadron