Create a Color Changing Sticky Header Without Code in Elementor [PRO]

in this video we'll create a sticky header in elementor that changes color as visitors scroll through our site stick around to see how it's done hey everyone this is shiri from elementor when designing our site one of the most important elements is the header it lets visitors know where they are via our logo allows them to navigate the site with ease and sometimes includes one or several call to actions such as contact us or even buy a product or a service generally speaking it's a good practice to keep this navigation bar accessible by making it sticky but this doesn't mean our header needs to be static we can add some color and different effects to make it more dynamic so let's jump right in and see how we can do this with elementor we'll work on a header template and use motion effects to achieve the color changing effects when we scroll both are elementor pro features so make sure you have either the elements or pro plugin or that you're working on an elementor cloud website okay let's begin in the home page with this drone store as you can see we already have a header but it's not really sticking around as i scroll through the website we want to make sure that a the header sticks to the top of our page and b it starts off with a transparent background and changes color only when we scroll move through different side parts by hovering the cursor over them this yellow button indicates that this is a template outside of the page we're currently working on click edit header to well edit the header the first step is to make it transparent click the container and under style choose a transparent background color i'm using a global color for this but we can also use a custom color next head over to the advanced tab and give it a negative margin to make the header appear over the hero image to make sure the header is visible above all other elements set the appropriate z index i'll set it to 9999 just to be sure now that we're done with background color expand the motion effects tab and set the sticky setting to top let's see how we're doing so far this looks great okay we already have a small hiccup with a nav bar here and again with the logo and the text here let's open the editor panel again to fix this we want the backgrounds color to change on a scroll so for this option go to the style tab and start by changing the background to a solid color this is a bit too heavy for this design so we'll make it a little more transparent let's see here fantastic already looking much better to add the color changing effect toggle scrolling effects to on and choose transparency set it to fade in and set the appropriate values because we want the color change to happen very early on page scroll we need to set it to a low percentage and make the start and finish points of the effect very close together once that step is done close the transparency window and make the effects relative to the entire page we'll update the page to save the changes we've made time to hide the editor panel and see it in action looking good it's not bragging if it's true i hope you found this video helpful if you did be sure to give it a like and let us know what kind of content we should continue making for you thanks for watching this is shiri from elementor signing off until next time keep creating

Channel: Elementor

Views: 57,593

Keywords: elmntor, elementor pro, elementor cloud, cloud website, elementor cloud website, wordpres, wpress, sticky header, color change on scroll

Id: PJp87rmeLcI

Length: 3min 49sec (229 seconds)

Published: Thu Apr 21 2022