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

[@erickson.scarlet]

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

[@websquadron]

Glad to hear it

[@wathekalzuaiby9086]

Great work, This solution is great. Avoid duplicating header best practice

[@paulburgess4954]

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]

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]

I had to subscribe to your channel and turn on notifications right after watching this video. So powerful and helpful. 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]

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

[@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: kzbin.info/www/bejne/iaaxp2d-iM2AsJo Will try out to see if it still holds with container and 3.14

[@michajagosz1343]

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]

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

[@pezreloaded8436]

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

[@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?

[@pulp5618]

Hi. Thank you Imran bro, this really helped me. But I don't know why my forms (created using Gravity Forms) are appear weird after i activated this code. Any solution?

[@Alex_87878]

Amazing and simple as always, thanks for all that great content mate, keep the it up. I have a question regarding this function on mobile. When you scroll down and the address bar of the browser slides up, I believe the view height is being recalculated and the header sometimes slides down when it's not supposed to. Has this happened to you and if it did, did you manage to fix it?

[@bySterling]

Awesome and great touch w the transition

[@webtappers7863]

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

[@christhjian9923]

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?

[@SquirrelRock]

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

[@websquadron]

Thank you so much!

[@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]

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

[@rakibulhashan4682]

Very Good Imran!

[@thomaslevack]

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]

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

[@harbourdogNL]

I'm doing this, thank you.

[@PabloAlbaBur]

Thanks, a success and easy to implement

[@douglascapron9814]

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

[@websquadron]

Good question. Let me probe and check.

[@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: kzbin.info/www/bejne/gWiqaZmVrq55h5o

[@visualmodo]

Truly good job! =D

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

[@RemcoHarmsen-w6n]

Sweet, thanks!

[@RicardoMiqui]

Absolutely priceless!

[@harbourdogNL]

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]

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

[@06Smoker]

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]

Have you got a URL with that activated?

[@06Smoker]

@@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 :)

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

[@adamhharbin]

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.

[@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 :)

[@qbeachview]

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]

Have you adjusted the offset values?

[@qbeachview]

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

[@Downhiller-wu3pn]

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]

I'm going to re-explore this soon

[@Downhiller-wu3pn]

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

[@dafaRPR]

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]

Any other JS on the screen?

[@dafaRPR]

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

[@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?

[@pulp5618]

My sticky header was misaligned when resizing the browser window, the "all" in " transition: all .5s ease!important;" was causing bugs and problems, i changed the css code and problem solved

[@chathurajayadinu]

Thank you ❤

[@notapplicable4283]

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

[@muhammadhaseeb1965]

Sir you are great

[@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?

[@salmanrazakmemon]

Zabardast :)

[@texasforslund7934]

Great Job! But it dosent seem to work on mobile for me?

[@websquadron]

It should do. Are you getting any console errors?

[@fahadnazir6271]

Its Helpful

[@arijacko]

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

[@websquadron]

I dod am updated vid 3 months ago: kzbin.info/www/bejne/gp2TlnSbi850i5ofeature=shared

[@jackelies9947]

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

[@websquadron]

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

[@multa7053]

Legend!

[@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?

[@emmyrtgfx5738]

how did you fixed that? I have the same problem

[@SilverFOXO]

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

[@websquadron]

It’s just for Code Snippet videos :)

[@shaanroy404]

thanks man

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

[@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]

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

[@MrJohnboom]

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

[@websalve6134]

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

[@BenBaudart]

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

[@КостяШевкин-з5х]

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

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

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

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

[@edizkacmaz]

can i do that for only mobile devices?

[@edizkacmaz]

i think i can

[@websquadron]

Yes you can :)

[@edizkacmaz]

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

[@RoyBizfrend]

Is this compatible in mobile mode?

[@websquadron]

Yes

[@fatjay9402]

Great!

[@karolisbaltakis4509]

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

[@websquadron]

See this update: kzbin.info/www/bejne/gp2TlnSbi850i5ofeature=shared

[@karolisbaltakis4509]

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

[@MadMarcTV]

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

[@meganwalshconsulting]

I couldn't get this to work. is there an updated version of this?

[@websquadron]

Have you seen this version that definitely works? kzbin.info/www/bejne/gp2TlnSbi850i5ofeature=shared

[@meganwalshconsulting]

@@websquadron thank you. I will retry this. I realize now that the code snippet won't activate. I keep adding a new snippet and hitting save and activate but it's showing that I don't have any snippets. I will have to investigate the plugin further.

[@meganwalshconsulting]

And when I import the snippet instead it says "no snippet was imported". Weird.

[@jo5hdavis]

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

[@websquadron]

Same idea but place the mega menu in the Header.

[@mouadchadli5445]

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

[@websquadron]

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

[@f2fcoil]

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

[@websquadron]

Let me check that

[@RaheelPatel_WP]

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]

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

[@RaheelPatel_WP]

@@websquadron It is DreamHost

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

[@advanced-developers]

good

[@zahidmahmood9046]

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

[@websquadron]

How did you build the header?

[@User9482-z2s]

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

[@kylequinn5629]

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

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

[@User-b9o3b]

Can you do it With the free version of elementor?

[@websquadron]

Yes you can in EL Free

[@User-b9o3b]

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

[@khaidiratz7958]

​@@User-b9o3b the css are pasted in the code snippet plugin. Not elementor

[@User-b9o3b]

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

[@khaidiratz7958]

​@@User-b9o3b 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

[@Brandvisionmedia]

Does not work...

[@websquadron]

Are you using containers?

[@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]

how to do that? @@websquadron

[@websalve6134]

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: kzbin.info/www/bejne/hJ6xl5Sdm6-LqZI

[@websquadron]

Is there any offset effects applied there?

[@websalve6134]

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