Get Premium

Elementor Transparent Header Change Colors On Scroll Easily

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this tutorial, I'm going to show you how to make a transparent header with Elementor that will change background color, as well as links and logo colors on scroll.

With this simple CSS only method, we are changing the colors of the links, buttons, social icons and logo on scroll, for the Elementor Header template.

Here is what we are creating.

Copy Template
Download Template

Please log in to access this template. It's free! Login here

 

If you need even more control, and to change colors back and forth over certain sections of your page, have a look at the Elementor Header Change Color On Scroll Dynamically tutorial.

Let's get started.

First, create your Elementor sticky header template

Create a new Elementor header template with the Theme builder.

In your template, be certain to set the tag to <header> under the template options, for proper SEO, semantics and accessibility:

Elementor Transparent Header Change Colors On Scroll Easily 1

Find these settings by clicking on the keg icon in the lower left corner.

After this, create your header as you need it.

You will want to add the CSS ID header-on-scroll under Advanced > CSS ID, on the parent most container. You can rename that container also, here I renamed it 'header'.

Elementor Transparent Header Change Colors On Scroll Easily 2

Also give it a Z-index of 999.

Also in the Advanced > Layout tab, you will need to set a negative bottom margin that's roughly the height of your header. That's what will make the content below go behind it, making it transparent.

Elementor Transparent Header Change Colors On Scroll Easily 3

That 'header' container will need to be set to sticky:top under Motion Effects, and to have a sticky offset of 40, or whatever you require.

Elementor Transparent Header Change Colors On Scroll Easily 4

Use the icon element to set your logo instead of the image element, that way we can change the colors of the SVG on scroll (presuming your logo is a SVG).

Set Fit To Size to On.

Elementor Transparent Header Change Colors On Scroll Easily 5

Then, go under Advanced > Custom CSS, and add this CSS

Add this CSS, and adjust as you wish. There are comments thorough that should help you understand what is what, and you should also see it when editing directly and scrolling down a bit.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Transparent Header Change Colors On Scroll Easily tutorial 
 * Found at this URL https://element.how/elementor-transparent-header-changing-color/ 
 */ 
</script>

Ignore the red X, it's from the old CSS linter Elementor is using.

Elementor Transparent Header Change Colors On Scroll Easily 6

The CSS is working fine regardless.

Finally, enjoy your Elementor transparent header changing colors on scroll!

I hope you have enjoyed this tutorial.

Let me know if everything worked well for you.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

28 Responses

  2. Hello, does this create the same type of header you have on this website? When i set the the negative padding at the top, the header changes to the colour like its already started scrolling. What am i doing wrong?

    1. I updated the tutorial with slightly different instructions, and it is a better and more resilient way to make this! Let me know if it works for you. Start from fresh, as the code is different now.

  5. Excuse me! I am a beginner... what do you mean "add this CSS to the place of your choice". It should be in the sticky section > advanced > custom css or in another place? Thanks a lot!!!!!

      1. Great work Victoria! Don't hesitate with any other questions!

  7. Hello - this works great! but the button border doesn't change colour. Do you have any CSS for the button border colour also changing on sticky header? Thanks!

  11. Hi Maxime!
    This works great - my only issue is that I want to keep the button text the same color on scroll - is there a way to do this?
    Many thanks - Heather

  12. Hi Maxime,

    Thanks for the tutorial. It works great.

    However, I'm having an issue with the logo. It won't change color. I tried adding a link to the logo, but nothing happens.

    Thanks.

  13. Hello,

    Thanks that is very useful

    One quick point to note on it.

    If you resize the windows the width of the header does not change unless you refresh the page, I know its not typical user behaviour.

Leave a Reply