MENU

Fun & Interesting

A Fully Shrinking Sticky Header On Scroll With Elementor

Jeffrey @ Lytbox 50,827 3 years ago
Video Not Working? Fix It Now

🔥 Connect with other web designers inside our free Lytbox Academy community on Circle 👉 https://community.lytboxacademy.com/ ✅ Go from beginner to building awesome websites by mastering Elementor: https://lytboxacademy.com/design-with-elementor/ ✅ Turn Figma into your superpower and 10x's your design skills: https://lytboxacademy.com/figma-course-for-web-designers/ ✅ Learn how to rank sites & offer your clients SEO services: https://lytboxacademy.com/seo-for-wordpress-course/ ===== 👇 Full tutorial, code, and links below: In this tutorial, we'll be adding effects to Elementor Sticky headers by shrinking headers, logo & images, menus, and buttons on scroll. We'll also be changing the header background color on scroll using Elementor sticky headers. 🔵 The CSS snippet to style the highlighted text is can be found here - https://lytboxacademy.com/shrinking-sticky-header-on-scroll-with-elementor/ How to add CSS Tutorial 👉 https://youtu.be/U6txSmJXCcs ===== Time Stamps 1. Building a Header 1:18 2. Setting Up For Shrinking the Header 6:57 3. Making Your Header Sticky 8:22 4. Reviewing the CSS To Add 10:06 5. Shrinking the Header 11:45 6. Changing Your Header's Background Color On Scroll (bonus effect:) 12:02 7. Shrinking You Logo 15:45 8. Shrinking Your Menu 17:20 9. Shrinking Your Button 18:38 10. Building A Mobile Menu 20:04 11. Shrinking Your Mobile Menu 21:49 Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox #elementorheader #elementorshrinkingstickyheader

Comment