Show-hide Header on Scroll in Elementor PRO

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

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

50% 1

Is there a way to improve the fixed header in Elementor PRO? To push it one step further and make it more appealing? Here’s the good, old deal: hide the header as the page is scrolled down, and show it back when scrolled up. Currently, there’s no instant solution in Elementor but with the chunk of (copy-paste) JavaScript code, the effect can be achieved in a minute. Learn how by watching this Elementor PRO video tutorial and sharpening your Elementor skills!
-------------------
**** Download Tutorial Files for $1.25 ****
The package includes 1 Elementor PRO
importable template.
::::: DOWNLOAD LINK: gumroad.com/ooohboi
( Download and purchase is made thru Gumroad (gumroad.com), highly trusted download service )
// JavaScript code used in this tutorial available at Gist:
gist.github.com/oooh-boi/80e7...
If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!
be.elementor.com/visit/?bta=1...

Хобби

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

28 дек 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@sergiosanchez3618 3 года назад

Bro, it's the first I use a "code" tutorial and everything works as expected. Thank you so much, I'm crying. Blessings.

@sujitbiswasseo 3 года назад

You are so amazing!!! Among thousands of RU-vid channels I found you very straightforward to the point approach and very nicely described content. I am already in love with your way of teaching....! Stay blessed.

@OoohBoi 3 года назад

Wow, thank you!

@jmottawa 4 года назад

You just saved me MANY forehead bruises and repetitive sighs. Works great! Thank you!

@serkankurnaz1027 4 года назад

WOW! Works perfect, and exactly what I was looking for :) Thanks a lot! Great video!

@TheWoodyTiger 4 года назад

Thanks a lot. Very useful. I saw your blocks in the store. At first I didn't get what was so special about them. But when I started to switch between desktop and mobile ... oooh boi... I bought everything and since then I'm not only your fan but also a collector. Have a great new year!

@OoohBoi 4 года назад

Thanks mate! You too have a great NY!

@alvarez958 3 года назад

As allways, Nice teacher voice, 100% clear explanations and more tips & tricks to make our live easy " oooh boi you are the best !!!!!!! " THANKS AGAIN

@OoohBoi 3 года назад

Happy to help!

@CheckTesting1 Год назад

Afternoon greetings ooohboi, hope that I find you & your family all in good spirits 🙏🏾 You are a legend in your own rights ☺️ I had this video showing on my homepage this morning, decided to give it go and heh presto 👍🏾👊🏾 🤭 Keep up the good work, have a very blessed day, and thank you once again 🙏🏾 😃

@mindfulnessforcovid336 4 года назад

Thank you SO much bro, been looking for a solution to shitty old school headers all day. This works like a charm. $1.25 well-earned!

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

Hey :) thanks for the JS snippet, it's such a great era we live in, when I can even ask ChatGPT to explain every line of the code in order to get a part of your deep knowledge that permitted you to write it :) GPT even helped me enhanced it a little bit in order to delay the offset so that when you scroll down only once when positioned at the very top (0) of the page, there's no "stuttle-ish inherit-body-color background" appearing during the 0.3s animation. Huge help !

@danyyu2641 4 года назад

Wonderfull ! Elementor should sponsor for such amazing tuto. Great Job !

@kevganhiga 4 года назад

Perfect video! Perfect timing! Thank you 🙌

@panosarkomanis795 3 года назад

Excellent! Thank you for this. Very helpful. Your implementations and recommendations are so inspirational.

@OoohBoi 3 года назад

You are so welcome!

@bySterling 4 года назад

Yes!! My fav menu on scroll flavor and style! 🙌🏻⚡️❤️📱💯👏🏻

@AlexGuzmanGTR 2 года назад

Thank you so much! I looked everywhere to find a way to do this!

@jackmacrae4990 Год назад

This is great, just what I was looking for. Thanks a lot! :)

@estebanmugica9772 4 года назад

Brilliant. You just made my day. Thanks a million!

@MIlyas-hv7ic 4 года назад

Amazing and very helpful tutorials, keep it up. 👍👍👍

@dougcrawford6967 3 года назад

Exactly what I was looking for also. Works perfectly. Thank you so much.

@OoohBoi 3 года назад

Glad it helped!!!

@manuelcarrasco1683 3 года назад

One unique word "GENIUS"..INFINITE THANKS

@infomrkweb 4 года назад

Yeah! I been looking for that for long. Thousand thanks!

@OoohBoi 4 года назад

Enjoy!

@CronYcK1 3 года назад

omg , all my apreciation to you man, love from Romania

@baconator953 4 года назад

Thank you so much! Works like magic!

@heeebeeegeeebeee 2 года назад

Worked fantastic, thank you!

@Jess-cb2jm Год назад

Hey Oooh Boi, Thanks for generously sharing. Where will the world be without 'a little help from my friends' ? Some people teach while others do. Oooh Boi can do both!

@sahadatsahadat695 3 года назад

Such a fantastic video. Thank you so much.

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

Thank you so much for this video. It's so helpful.

@shaldmaja 4 года назад

Perfect, direct to the point

@borishilderal9528 2 года назад

Works perfectly !!!! Thank you so much !!!

@puhjure 4 года назад

Great! saved me a lot of work. Thank you :)

@OoohBoi 4 года назад

Glad it helped!

@BottlecapBerry 4 года назад

Great videos dude! I've been digging your channel for a while now and I've learned lots of interesting tips and tricks. One question on the show-hide menu though. Is there any way to make the menu appear as faded when you scroll up and you're not at the top of the page? Thanks for all your content :)!

@khrisdaniellejalog3741 4 года назад

You are the best, man!

@BelousovP Год назад

It works! Tnx dude!! I have been looking for this solution for a long time. I don't understand why the elementor developers haven't included "show-hide" in the basic functionality of elementor\pro until now.. May be something wrong with my custom theme or Elementor version. Anyway, thank you!

@heuercj Год назад

Thank you for an awesome share. Very impressed.

@nadenaNPI 4 года назад

Perfect video and perfect timing! thx!

@OoohBoi 4 года назад

Glad it was helpful!

@TaufikLukman 2 года назад

thanks Man! you're a savior

@leetatham8186 4 года назад

Amazing, thank you so much!

@BlueNovaBeats 3 года назад

Thank you!! Works perfectly! 🙏🏾👨🏾‍🚀

@OoohBoi 3 года назад

Great to hear!

@pardenstyle1697 4 года назад

OMG thanks a lot for the perfect video

@arizonaphotoboothrentals603 4 года назад

Works perfectly. Thank you so much.

@OoohBoi 4 года назад

Great to hear!

@YoutubersSinExito 4 года назад

Thanks! it works perfectly. So easy to do

@OoohBoi 4 года назад

Great to hear!

@milanmilicev 4 года назад

Great video. Keep up the good work.

@AdADglgmutShevanel 2 года назад

Thanks, works great!

@chosenstatus Год назад

Legend. Working still.

@richardfletcher3676 4 года назад

Great video. Really appreciated

@smeagoltheunrealdeviant9357 2 года назад

THANK YOU SO MUCH BROTHER!!!

@MK-SHOW 4 года назад

again ! WOW. thank you sooo much !

@RazaSid 3 года назад

Great video! Thank you for sharing.

@OoohBoi 3 года назад

Thanks for watching!

@juarang 3 года назад

amazing bro!!! you are the real deal

@OoohBoi 3 года назад

Glad to help!

@ALI-vc2zo 3 года назад

Thanks bro, perfectly working.

@OoohBoi 3 года назад

Thanks for the feedback!

@pantonio70 3 года назад

Its perfect, tanks bro!

@JohnCarter-hm8pv 2 года назад

5 star video again. Thank you for sharing. I am looking for a way to add a section above the menu (ie a full width image for a blog post) which will scroll off page on scroll but then the sticky menu would stay on (or off depending on scroll, like in this video). Would it be hard to do this?

@Lancet75 3 года назад

Great tutorial! Great script! Thanks!

@OoohBoi 3 года назад

Glad you enjoyed it!

@tadhanaproject5030 3 года назад

You are Awesome! Thank you

@albannoutcha3327 3 года назад

So great. It's perfect. Thanks Ooo Boi

@OoohBoi 3 года назад

I'm glad you like it, thanks for watching!

@albannoutcha3327 3 года назад

@@OoohBoi your Channel IS awesome.thank you si much

@sainalabidinal-saadi9860 2 года назад

Thanks for the tutorial, it works perfectly. But do you know how I would have to change the code so that it only affects the mobile view?

@therockersdigest 10 месяцев назад

Great! Thank you.

@noomanvalini 3 года назад

THX, amazing tutorial!

@OoohBoi 3 года назад

Glad you liked it!

@miladhesami6630 4 года назад

Hello, thank you. It works perfect and save a lot of time

@OoohBoi 4 года назад

You're welcome!

@EthnicFlightSim-hh1wr Год назад

Veyr good tutorial thanks very much

@xtinawilhelm 2 года назад

Awesome! Thaaaaaanks

@giulianazapata7769 2 года назад

EXCELENTTTT!!! THANK YOUUU

@tetiana.syvokin Год назад

thank you so so much!

@khandakershahi 4 года назад

Thanks man. 😀

@aheli 2 года назад

Great channel. Learned a lot, so thx for that. But just wanted to bring to your attention that when using this code on Elementor`s new flex container there is a issue with scaling/responsivness. The header breaks when adjusting the screen size manually. If you ever came around to solve this issue, it would be much appreciated. Thanks again!

@Lensbreak 2 года назад

@cranination 2 года назад

I RECOMMEND AMENDING LINE 20: 19 // show-hide header with ease/transition 20 ooohBoi.header.style.transition = 'all 0.3s ease, width 0s'; Adding ", width 0s" to the property string will fix the header width from adjusting with the transition animation. The transition is great for the show/hide effect, but the translate animation is not desirable when the header width is scaling to fit different window sizes. In other words, this fixes the "delay" when the header width scales in or out. Hope this helps someone! Thank you, Oooh Boi for this amazing tutorial!

@thenewyorkean Год назад

also 0.5s transition time looks smoother to me, 0.3 feels a bit sharp

@martinnorton5091 Год назад

Thanks so much - a real help - that fixed width issues for me when adjusting view width

@tradejournal 3 года назад

So helpful. Thank you

@OoohBoi 3 года назад

Glad it was helpful!

@harrisliu9174 4 года назад

It's really perfect done on elementor with js!! Do you have other tutorial teaching how to change the nav style by scrolling done to a specific Y-position? I think this will take js to active the style. (Actually I'm facing this issue right now😂)

@pellekarlsson152 4 года назад

Awesome video Oooh Boi! please can do videos about transparent and shrink header:)

@intuitivamkt 3 года назад

Brilliant!!!!

@zul3682 2 года назад

thanks a lot man.

@Buddy-sl1ti 3 года назад

Thank you so much! ❤️

@OoohBoi 3 года назад

You are so welcome!

@michielhoorn 2 года назад

Great video, thanks a lot for all as I learn a lot! Your vids ar great! I do have an issue on mobile view front end as header is hiding but than appears even when I keep on scrolling down. Any solution? All the best

@lorenachavezchavez5516 3 года назад

THANKS !!! IT´S WORKING!! I´M HAPPY

@OoohBoi 3 года назад

Great!

@ricardocastellonperez6883 4 года назад

Thnx friend, this video is the best bro, THANK YOU TOO MUCH

@OoohBoi 4 года назад

No problem, thanks for watching!

@ricardocastellonperez6883 4 года назад

@@OoohBoi i understood everything and i dont know english jajaja you teach good men

@swire1571 3 года назад

Awesome 🔥🔥🔥🔥🔥🔥🔥🔥 thanks a lot ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ you saved my day dear 🙏

@OoohBoi 3 года назад

Glad to read I did!

@user-hz9zu1cf3v 4 года назад

Awesome job. I have two sections. Topbar is 37px for languages and stuff and the bottom one (fixed menu) is the main menu. With js I get the main menu to show on scroll but is has the offset from topbar 37px for some reason. So basically there is empty space of 37px between browser top window and menu. Can you try to replicate it? Simply create two sections and make the bottom section sticky. Testing with chrome on windows.

@circuitmuse3623 2 года назад

Thank you.

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

Thanks so much

@delightfirst7850 3 года назад

Amazing!

@OoohBoi 3 года назад

Thank you buddy!

@BD-hy8bl 4 года назад

Great one again Ooh Boi. Question : any effects on SEO?

@venkovmax Год назад

Большое спасибо, друг! 👍👍👍

@fifty095 4 года назад

Nice ! Easy Peasy ! Thx for this tutorial ! it would be nice to have a video dedicated to custom css, especially to style the titles, see an example of style in the videos. For tips and inspiration;)

@OoohBoi 4 года назад

Thanks for watching! As for the "effect", just use Developer tools to see how the title CSS looks like.

@humbertogregorio8092 3 года назад

Great tutorial! Thx a lot. I've bought it also. Any idea how you could shrink the logo when it is not at the top of the site? For example: show a smaller logo when scrolling up?

@OoohBoi 3 года назад

Well, the show-hide script doesn't actually detect whether the scrolling position is top, middle or the bottom of the page, it rather detects the scrolling direction. So, it can't be done by the default, you should extend the existing JS code towards that goal...

@cannamink 3 года назад

Thanks, man

@OoohBoi 3 года назад

Happy to help!

@techimosupport8487 Год назад

Great video but i want same thing but in opposite way like hide header while scoll up and show header when scroll down, how can i do that please help?

@varin9340 Год назад

Thank you! I'm trying to repurpose your code for a button on my website. Is there a way to change the code so that my button slides in/out from the bottom instead of the top?

@Kiril_Bulgaria 4 года назад

Go Boi!

@jh_90 4 года назад

Oooh Boi bro, might be just me but... mine is inverse! When I scroll down my header appears and when I scroll up it disappears? Copied your instruction to the dot! Any clue?

@mehedihasan3570 3 года назад

fantastic

@ndon85 3 года назад

man thank you so much

@OoohBoi 3 года назад

Glad it helped

@afrikstabeltextiles1064 3 года назад

Thank you

@vensweetvens7122 2 года назад

Perfect timing..

@susanngigi7599 4 года назад

Thank you for the video. Very helpful. Question I want to apply break points to the nav menu because at certain screen sizes it doesn't get into humberger mode and is too long. How do I do that? Can it be a continuation of this video. Thank you.

@OoohBoi 4 года назад

There are two breakpoints supported by Elementor - by the default - when speaking of responsiveness. You probably know it already. However, you can define your own quite easily. Maybe another video of mine could help, at least for a while: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mlvJwbA2mc4.html I have a list of tutorial topics that are about to come, one of them is quite close to what you wrote, however, my regular job does not allow me to publish those at a regular pace. I still can't make for living out of YT...

@BigWealthySchlong 2 года назад

This code is having some issues while the Locomotive scroll from your plugin is activated. The menu stop being sticky and is not appearing once scrolling up. Any ideas @Oooh Boi?

@biggr7911 2 года назад

Thank you for the great video! I'm just curious. Is it possible to: 1. Hide the header when user scrolls down; 2. When user scrolls up a little, don't show the header; 3. When user scrolls up a bit more, around 300px, then show the header. Thanks!

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

Hi. Any option to make this without java? some plugins have visualizations issues when use java inside elementor. Thanks.

@philippelopes8706 4 года назад

brazil here and u are just amzng

@OoohBoi 4 года назад

Thanks buddy!

@oOSilverZackOo 3 года назад

This video should have more likes!!

@OoohBoi 3 года назад

It takes time... but THANKS on this one!

@MrPer4illo 4 года назад

Great video! Thanks for posting. It works almost perfect. The issue i am experiencing is that the section does go up and down, but the menu stays at place (both desktop and mobile hamburger) as if it is not a part of the header. Could you please advice what might be the issue?

@cimcozhuseyin 4 года назад

I don't know if you solved this yet but I experienced the same issue. The problem was that I had set the Sticky option of the Menu widget to Top. When I changed the sticky option on the Menu to none, it all worked like a charm.

@corinagrether 2 года назад

Thank you so much for this amazing tutorial. I don't know why, but it seems that your plugin creates a conflict on my site. The sticky header isn't working at all...When turning off, sticky header is coming back. i've turned off also all the developer elementor experiments and there aren't any "native" animations activated. I would like to use the plugin...