Elementor Sticky Headers: Hide Header on Scroll Down, Show On Scroll Up

Published: 18 May 2022
on channel: Jeffrey @ Lytbox
79,088
1.3k

In this tutorial, we'll hide the header on scroll down and show it on scroll up with Elementor sticky headers.

🔵 The CSS snippet to style the highlighted text is can be found here - https://lytboxacademy.com/hide-header...

How to Create A Fully Shrinking Sticky Header (This effect with the hide and show on scroll effect work well together) 👉    • A Fully Shrinking Sticky Header On Sc...  


🌟 Join us in the Lytbox Academy Community 🌟
https://lytboxacademy.com/join-us/


/////


✨ Learn High-Level Web Design Skills With Me & The Lytbox Academy!

🔥 Turn Figma Into Your Super Power! 🦹🏻‍♀️
https://lytboxacademy.com/design-with...

🔥 Master Elementor & Web Design Skills:
https://lytboxacademy.com/design-with...

🔥 Learn Powerful SEO That's Easy-to-Follow WordPress:
https://lytboxacademy.com/seo-for-wor...

🔥 Build A WordPress Maintenance Business:
https://lytboxacademy.com/maintenance...

💎 Become a Lytbox Academy Pro Member:
https://lytboxacademy.com/the-academy/


/////


👉 The WP Hosting I Personally Use:

✅ Cloudways (use promo code LYTBOX for 30% off 3/months)
https://lytboxacademy.com/cloudways/

✅ xCloud: https://lytboxacademy.com/xcloud/


/////


💖 My Recommended WordPress & Web Design Tools (These are what I love and use!)

📌 My Go-to Page Builders

✅ Elementor: https://lytboxacademy.com/elementor/
✅ Breakdance: https://lytboxacademy.com/breakdance/
✅ Bricks: https://lytboxacademy.com/bricks/


📌 The WordPress Plugins I Love (my personal stack)

✅ Crocoblock (🌟 use coupon code 'Lytbox' for a special discount): https://lytboxacademy.com/crocoblock/
✅ SEOPress: https://lytboxacademy.com/seopress
✅ SureCart: https://lytboxacademy.com/sure-cart/
✅ SureTriggers: https://lytboxacademy.com/sure-triggers/
✅ Perfmatters: https://lytboxacademy.com/perfmatters
✅ InstaWP: https://lytboxacademy.com/instawp
✅ WP Umbrella: https://lytboxacademy.com/wp-umbrella


/////


Time Stamps 👇
Starting the Tutorial - 1:12
Step 1: Edit Your Header Section - 1:51
Step 2: Copy & Paste JS Code Snippet - 3:36
Step 3: Adjusting the JS Code - 5:25
Step 4: Copy & Paste the CSS - 6:20
Step 5: Mobile Version - 8:03
Why Would We Add This Effect? 10:12


Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox

#elementorheader #elementorstickyheader


Watch video Elementor Sticky Headers: Hide Header on Scroll Down, Show On Scroll Up online without registration, duration hours minute second in high quality. This video was added by user Jeffrey @ Lytbox 18 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 79,088 once and liked it 1.3 thousand people.