In this Tips & Tricks video, we’ll create a sticky header in Elementor that changes color transparency as visitors scroll through our site.
The tutorial will cover:
✔︎ Sticky header uses and benefits
✔︎ Make a header sticky
✔︎ Changing color transparency on scroll
✔︎ And much more!
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!
Hi Everyone, This is Shiri from Elementor. When designing our site, one of the most important elements in it 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 CTA’s 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 effect when we scroll; both are Elementor Pro features, so make sure you have either the Elementor Pro plugin or that you’re working on an Elementor Cloud Website.
Ok, let’s begin in the homepage, 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 site 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… um…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 9,999 just to be sure.
Now that we’re done with the 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 gre— Ok, we already have a small hiccup with the 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 background color to change on 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! Amazing!
We started off with a transparent header that changes to a more solid color as we scroll and stays at the top of the page the entire time. 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 to let us know what kind of content we should continue making for you.
This Shiri from Elementor signing off. And until next time – keep creating!
