This tutorial is for those who would rather not use the CTA widget but would…. When scrolling down, the Elementor transparent sticky header will change to that color. Click the "VH" option and type in "100". All you would need to do is make sure that the header is only visible on the homepage and then create a separate header for the rest of your site. To make sure your header sticks to the top as users start scrolling, you can use Elementor’s Motion Effects feature. Create a new section above the ones you just created. For purposes of this tutorial I am going with 120 px. Scrolling Effects: Slide to ON; Transparency: Click pencil edit icon .stickyheadersection { transition: background-color .4s ease; } .elementor-sticky--effects.stickyheadersection { background-color: #fff; /* Background color when sticky */ box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, 0.29); /* remove if you don't want a box … Navigate to Custom CSS & JS > Add Custom JS and paste the jQuery below and give it a descriptive title. Did you copy and paste the css as I have above. Thanks. An example is having a title appear and then dissolve in accordance with the scroll. The header will just be missing throughout the page. It looks odd to me, having a visible scroll bar just beside the vertical header all the time. NOTE: If you have any other sticky header plugins activated – Deactivate them now! Evening Voets Media, The new Scroll Image widget for Elementor allows you to add impressive image scrolling effects to your website using Elementor. Don’t install a wordpress plugin, use CSS code, it’s simple to do! Hi Zbigniew, Often times we’re stuck with the default settings that limit us to using the same background color AND logo version when using Elementor’s Sticky Header feature. Well the answer is yes and very easy I might add. How to Create a Shrinking Header on Scroll Down Using Elementor. You need to adjust this bit of jQuery, //Decides when this script will work 1024 It can be a little non-intuitive, but to change or remove the Display Conditions, you edit the header in Elementor and make any change to turn the "Update" button green and clickable. Publish and test your header. background-color: rgba (0, 0, 0, 0.70); } You can change the background-color to be anything you want the header’s background to turn into (hex #, color such as “red”, rgba value, etc. Hi Mario, Here is a short video for you where I’ve explained how to create sticky menu in Elementor editor. Update the section's background to a solid color. Hi Yury, Swap the default image with the logo you'd like to use. // When the user scrolls down 50px from the top of the document, resize the header's font size window.onscroll = function() {scrollFunction()}; function scrollFunction() This will bring up the edit column pane to the left of the screen. Elementor Version: Pro ( Needed to build custom header ) Additional Plugins: Simple Custom CSS & JS. Note: Custom header is only available on Elementor Pro.Find the differences between Elementor Free vs Elementor Pro.. First off, login to login to your WordPress dashboard and go to Templates -> Theme Builder.Select a header you want to add the auto-hide behavior to and edit it with Elementor. if ( $ (window).width() > 1024). Any idea why this is happening and how to fix? All we need to do is add in this bit of css: .elementor-sticky--active {. Once you have made the needed changes to the header design, click ‘publish’, and choose where to publish the header. Right-click the header’s section handle to edit the section. It then worked. Under the "Advanced" menu type in "header" for the CSS ID. Click that to pull up the options menu. Save it and witness the magic that is jQuery. One problem… when I use on mobile and click on my menu after freshly loading the page, when half way down the page, the menu opens but higher than it’s supposed to. I added mine to my child theme. Smart Scroll: When you scroll down you will see the header is gone. There are several ways to add effects to your navbar and menus within Elementor. Under "Custom CSS" cut and paste the CSS provided below. Ut enim ad minim veniam, quis nostrud exercitation ullamco. © 2020 Shift Media Agency, All Rights Reserved. From the the drop down click on the "Edit Column" option. Elementor Shrink Header & Logo on Scroll - Simple Method Then, set the custom positioning of the elements in the column to inline, and vertical align to middle.. For the logo... Now, add an empty section above everything else. For this short tutorial I will show you how to hide your header completely until the user scrolls down a certain amount of px. Name your header template and click ‘Create Header’ Now you’ll be able to either choose a pre-made header template or create one from scratch. $(document).scroll(function() {var y = $(this).scrollTop(); if (y > 300) { //change this value here to make it show up at your desired scroll location. How to Hide Header on Scroll Down in Elementor. In the opened menu, click Edit and go to advanced settings on the left.