Elementor – Header Transparent + Sticky + Scroll Changes

A great feature of Elementor 2.0 Pro was the header & footer addition.  Now you can easily create your custom header navigation right from within Elementor, without needing your theme’s header to be what you want or any extra plugin.  

BUT!

Some things are still missing (I’m sure they’re coming, just having the header & footer builder was a huge release!)

A common question I see is how to use the new header builder to make a transparent header and furthermore how to make that header change color on scrolling (when using the sticky nav option).  This is completely doable with Elementor’s header template builder, but you need to do some fun CSS to make it  happen.  How do you ask?  Let’s do it!
(Yes it works for mobile too!)

Elementor - Header Transparent + Sticky + Scroll Changes 1

1.

Making the header transparent

  1. Make your header template like you normally would. For the example I’m just going to use one of Elementor’s pre-built nav templates. 
  2. To make it transparent, simply don’t choose a background for the section containing the header!
    Alternatively you can make it a classic color with rgba(255,255,255,0) to make it colored transparent but this isn’t needed unless something from your theme or other css is forcing the background color to be something specific when not selected.
  3. Set the Z-index of the section to a slightly higher number, such as 5, to ensure your header will be ontop of your other content.
  4. Publish your header (set whatever condition you want).
  5. On the page(s) where your header is being displayed, you need to take your top section and give it a negative margin (for me -117px was good based on the height of the header I’m using). 
    This is because even though you are using the sticky option, the section doesn’t become sticky until you scroll down on the page past its starting point (position:fixed is not applied when the page is loaded). 
  6. Here’s what I have so far, nice and transparent… but it could be better, transparent all the way throughout the page scrolling could be tough on the eyes.  Let’s keep going.
Elementor - Header Transparent + Sticky + Scroll Changes 2

2.

Changing the color on scroll

So the transparency was easy, but in most cases you don’t want to leave the header transparent while you’re scrolling.  Let’s change that.  

 – Go back to your header template and add a section ABOVE your header.  Set it to have no gap, 0 margin/padding just to be safe. 
If you do not add this when you scroll back to the top your header will not change back to transparent. 

Select your header section and give it a -1px top margin. 
This will make sure there isn’t a white space above your header due to the section you just added (it would be noticeable while scrolling back up with your sticky header)

Time for some CSS!

When you enable the sticky scroll option, Elementor adds javascript that when you scroll, the section gains the CSS class “elementor-sticky–active”.  We can use this to apply our own CSS.  

Select your header section and go to the Advanced tab -> Custom CSS area.  

All we need to do is add in this bit of css:

.elementor-sticky--active {
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.).

What we have so far!

3.

Changing the size on scroll

We’re getting there, but it could be better.  Another common design is having your sticky nav shrink in height once you scroll down so you can have a large header when the page loads but have it be a more appropriate size while viewing the page’s content. 

– To make this work properly if you are using a logo, we need to add some css classes or ID’s.   Select your logo/image, go to the advanced tab, and give it a CSS class or ID.  For the demonstration I used class and named it “logo”.  You’ll want to remove any sizing you have manually done through Elementor on your logo widget, we’re going to control it via the custom CSS instead.

Time for some CSS!

– Head back to your header’s section -> Advanced tab -> Custom CSS.
Add in our CSS to control the logo’s sizing (set the max-height to a proper size that fits within your nav bar)

.logo img {
width: auto;
max-height: 80px;
}

Now add our CSS to resize that logo when the navbar is stuck (set the max-height to a proper size that will fit within your “shrunken” nav bar):

.elementor-sticky--active .logo img {
max-height: 60px;
width: auto;
}

Now add our CSS to control the header’s sizing and shrink it when scrolling (set the max-height to the size you want it when scrolling):

.elementor-sticky--active .elementor-row, .elementor-sticky--active .elementor-row a {
max-height: 70px;
}

The full CSS for the header section should now be this:

.logo img {
width: auto;
max-height: 80px;
}
.elementor-sticky--active .logo img {
max-height: 60px;
width: auto;
}
.elementor-sticky--active {
background-color: rgba(0, 0, 0, 0.70);

}
.elementor-sticky--active .elementor-row, .elementor-sticky--active .elementor-row a {
max-height: 70px;
}

What we have so far!

4.

Adding transitions

Now we’re talking.  It could still be better, let’s remove the “snap” that happens (most noticeable on the logo) by putting in some transitions. 

Time for some CSS!

First up, let’s add a transition to make the background color fade in and out when sticking/un-sticking.

– Head back to your header’s section -> Advanced tab -> Custom CSS.
Add in our CSS to transition the colored header back to transparent (play with the 0.5s timing to make the fade slower or faster!)

selector {
transition: all 0.5s ease;
}

Add in our CSS to transition the transparent header to the colored header  (play with the 0.5s timing to make the fade slower or faster!)

.elementor-sticky--active .elementor-row, .elementor-sticky--active .elementor-row a {
max-height: 70px;
transition: all 0.5s ease;
}

Add it to the logo classes as well to make the logo shrink/grow without snapping!

.logo img {
width: auto;
max-height: 80px;
transition: all 0.5s ease;
}
.elementor-sticky--active .logo img {
max-height: 60px;
width: auto;
transition: all 0.5s ease;
}

The full CSS for the header section should now be this:

selector {
transition: all 0.5s ease;
}

.logo img {
width: auto;
max-height: 80px;
transition: all 0.5s ease;
}
.elementor-sticky--active .logo img {
max-height: 60px;
width: auto;
transition: all 0.5s ease;
}
.elementor-sticky--active {
background-color: rgba(0, 0, 0, 0.70);

}
.elementor-sticky--active .elementor-row, .elementor-sticky--active .elementor-row a {
max-height: 70px;
transition: all 0.5s ease;

End Result!

How do we look on mobile?

Our tutorial is offered free as a guide for use on your website and may be used commercially for client use as well.  No attribution is necessary to use our code in production websites, however you may not re-post or redistribute our code in any way without permission.

Using Elementor Pro 2.1?

Please view the new version of our tutorial for the Elementor Pro 2.1 release.

Share Me!

Share on facebook
Share on google
Share on twitter
Share on email
We use cookies to ensure that we give you the best experience on our website including downloads and analytics. By continuing to use our page you are accepting use of cookies listed in our privacy policy.