Elementor – Transparent Header + Sticky + Scroll Changes V2

This is an update to my previous tutorial (V1) which still works with older versions of Elementor but if you are using the latest release you need to use this guide.

This tutorial will show you how to create a transparent header that changes your background color and image or logo size on scroll while being sticky (stuck to the top of the screen).  It works for mobile and is fully responsive. 

Elementor Pro 2.1+

You must have Elementor Pro updated to at least 2.1 to use this tutorial to build your header.

Why an update?

Elementor Pro 2.1 has redone the way the sticky-header works.  In order to modify it with CSS we need to change some ways we accomplished the effect previously in V1 of the tutorial.

Why use CSS to achieve this over a plugin?

Firstly, there ARE plugins that achieve this.  There is also a plugin that achieves this specifically for Elementor. 
So why do it this way?  Nothing is wrong using a plugin to achieve it, the plugins actually use CSS (and sometimes javascript) to make these same effects happen. Some of it may even be very similar to the CSS I’ve written to do this!

The downsides of using a plugin to do achieve this effect:
  • One more plugin you have to manage/update
  • They add additional page requests to your pages where it's used to call their JS and CSS, this can increase page load times
  • You're limited to the controls they offer

For some the plugin is ideal and that’s great.  For those of you that want more options, direct control over the properties, and for it to be as lightweight as possible…. let’s get started!

Making your header transparent

  1. Build your header in Elementor as you normally would.  Set your section to sticky under Advanced -> Scrolling Effect -> Sticky -> Top.  Also set the “Effects Offset” to 1. This allows us to change the color on scroll, otherwise the new sticky would take effect incorrectly for what we want to do
  2.  Set the Z-index of your header section to a number higher than any z-index of your page content (I used 5 for the tutorial)
  3. Set your header’s BOTTOM margin to a negative value that matches the overall height of your header (before sticky).  Mine was -140px:
  4. To ensure we can easily edit our content in Elementor afterwards we can add some extra CSS.  This will revert the header back to it’s normal placement only in the editor (it will not affect the front-end)
    /* Changes the header to not be sticky when editing (doesn't show in the front end) */
    body.elementor-editor-active selector {
    margin-bottom:0px !important;
    }
    
  5. Ensure your section background is set to empty/clear for color:
Here's what I have so far

Changing the background color on sticky/scroll

  1. Go back to your Custom CSS for your section and add this snippet of code to change your transparent background to your custom color on scroll/sticky:
    /* Background color on sticky */
    .elementor-sticky--effects {
    background-color:rgba(255,255,255,0.85);
    transition: all 0.5s ease;
    }
    
  2. You can use any RGBA, Hex, or HTML color.  Use the color picker tool anywhere in Elementor to find your color and copy the code to use for “Background-color”

Changing Image/Logo Height on sticky/scroll

In order to change the image or logo size we need to be able to control it via CSS.  Ensure you aren’t controlling your image/logo size via Elementor (values should be blank).

  1. Select your logo or image element and give it a class of “logo” (Advanced -> CSS Classes -> “logo” without the quotations.  You can name it any class or use the ID, just make sure you adjust the below code accordingly:
    /* --- LOGO ---- */
    /* Logo sizing before sticky */
    .logo img {
    width: auto;
    max-height: 120px;
    transition: all 0.5s ease;
    }
    /* Logo sizing after sticky */
    .elementor-sticky--effects .logo img {
    max-height: 65px;
    width: auto;
    }
    
  2. Adjust the code so the “Logo sizing before sticky“‘s max-height is appropriate for your logo and the “Logo sizing after sticky” is the size you want it to be after scrolling.
Result
Full Code of the custom CSS:
/* Changes the header to not be sticky when editing (doesn't show in the front end) */

body.elementor-editor-active selector {
margin-bottom:0px !important;
}

/* Background color on sticky */
.elementor-sticky--effects {
background-color:rgba(255,255,255,0.85);
transition: all 0.5s ease;
}

/* --- LOGO ---- */
/* Logo sizing before sticky */
.logo img {
width: auto;
max-height: 120px;
transition: all 0.5s ease;
}

/* Logo sizing after sticky */
.elementor-sticky--effects .logo img {
max-height: 65px;
width: auto;
}

Next Steps

There’s infinite possibilities using this method of additional features, below are some examples.  Want any of these?  Select the “Custom Elementor Header” Fiverr Gig below or contact us!

Change Link Color on Scroll
More Coming Soon

Need Help?

We offer assistance with Elementor including creating a custom header for you, creating custom CSS & effects or helping you with a problem with Elementor/your header.  Check out our gigs on Fiverr below or contact us directly for your custom needs. New to Fiverr?  Use our referral link and get 20% off your order!

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.

Elementor Issue / Assistance

Assist you with Elementor issues or guidance or create custom CSS for your Elementor webpage.

Custom Elementor Header

Create your perfect website header to your specifications. Send an image, describe, or link a website that resembles what you are looking for.

PSD or Website -> Elementor

Convert your PSD or sample website/url to a fully functional Elementor WordPress website!

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.