Skip to Main Content

Elementor Sticky Header: The Definitive Guide (2022)

We will learn how to create an Elementor sticky header without using any 3rd party plugins.

Topic we will discuss

  1. Create a transparent Header.
  2. Create a Elementor transparent sticky header.
  3. Elementor sticky header change color on scroll
  4. Create a Shrinking Sticky header.
  5. Change the color of the Navigation menu when the user scrolls down.
  6. (New Topic) Swap or change the Logo when users Scroll down the wheel.

Picture showing how to create Elementor Sticky header

One of the most common questions, I have found on Elementor Official Groups & GitHub is how to create Sticky Header with Elementor.

To create the Elementor sticky header from scratch. I have to scour the internet and found a bunch of tutorials online and most of the how-to tutorials are simply copying and pasting the same CSS from Official YouTube channels.

I thought of writing a comprehensive, in-depth tutorial and reliable source that is well tested with both the section and Flexbox container without relying on any JavaScript or 3rd parties plugins with the ability to change the site logo on user scroll down.

Here is the fully functional example for the Elementor sticky header.

Basic Requirements & Knowledge:

  1. To fully utilize the Elementor sticky header functionalities, you will need Elementor Pro (Affiliate link).
  2. You need to add your own Media Queries (video) to make your site mobile responsive.
    Bonus: If you buy the template, you don’t have to worry about it.
  3. For browser compatibility use Autoprefixer.

Create the Header Template

I already enabled Default to New Theme Builder & Flexbox Container in Elementor’s Experiments. That is why the theme builder might be different from yours.

New Theme Builder

Flexbox Container experiments

Tips: if your Elementor Nav menu is broken when you update the Elementor core or Pro version. Here are the 6 ways to Identify & Troubleshoot The Elementor Nav Menu Broken.

Step#1(A): Theme Builder

To access Theme Builder, navigate to temeplates and click the theme builder

After you click the Theme Builder (reference above), you will be going to see all the Templates, you have created.

Picture showing all the templates from Elementor's Theme Builder

Step#1(B): Click the Add New button to create a Header template

To create the site header, we have to click the add new (+) icon button and choose the header as the header template.

Click the Header plus icon to create a header template

After you choose the header template, it will lead to Elementor Library. From there you can choose the prebuilt templates or block or create the template from scratch.

Step#1(C): Change the Title & HTML Tag of the template

Now, click the cog icon (settings) on the bottom left which will open the Header’s settings from there you have to change the tile and change the HTML tag to Header in general settings.

To remember properly, we have to Change the header's title & html tag in general settings for accessibility

Create Transparent Header

To create a transparent header, we have to create the structure of the template and inside the structure, we have to drag and drop all the necessary widgets like site logo widgets, nav menu widgets, etc.

Step#2(A): Select 2 or 3 columns or choose a Single container

To create the site header, first, we have created a structure containing 2 or 3 columns, or if you are using Flexbox Container experiments choose a single container.

Section users

Choose 2 or 3 columns to create a structure of the template

Flexbox Container Users

Choose a single flexbox container and create a structure of the template

Step#2(B): Drag and Drop all the widgets inside the section/container & add the CSS classes

Drag and drop all the widgets inside the page structure and provide CSS classes to the widget under the widget’s/section’s advanced tab (see the screenshot below for reference).

To style & control the site header, we have to add a CSS class to the container’s/ section’s advanced tab.

Container/ SectionTo style the header, we ahave to Add CSS class to container's advanced tab

Site Logo

Site Logo

Add CSS class to site logo's advanced tab

Nav Menu Widget

Add CSS class to Nav Menu's advanced tab

Step#2(C): Adjust the layout properly

Just align all the widgets to the center and do not add any style to the container/ section. Your design will look ugly for now later we will style it.

Tips: Do not style any widgets or a container, so later we don’t have to add !important to all the CSS.

After adjusting the structure, we have a container with 3 widgets such as site logo, nav menu & Search widget

Step#2(D): Set the background color to the default

By default, the background color of the sections/ containers/ widgets is set to transparent. So you don’t have to style it.

Tips: Sometimes a theme can add its background color to solid color if you want to figure it out. You can use Chrome Dev tools – Inspect elements and you will find the CSS responsible.

By default, Elementor set the background color to default which is transparent

Elementor Transparent sticky Header

To make the sticky header in Elementor, we have to enable Motion effects in the container/ section’s advanced tab.

Step#3(A): Set the z-index number to 1000

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

Z-index to 1000

Step#3(B): Set the sticky to top or bottom and effects offsets respectively

“Effects Offset” lets you determine when the effects will occur according to scrolling distance in pixels i.e 100px in our example. So basically it means, that when you scroll down 100px, the sticky effects will apply.

Enable Motion effects in Container's advanced tab

Elementor Sticky Header change color On Scroll

In our previous step, we enabled the sticky header under motion effects. Now to change the color of the header from transparent to solid. We have to apply Custom CSS so that when users scroll down the page the effects will occur.

				
					  /* 
    * sticky-header-container is the CSS class, I have added to container - advanced tab
    * Rather than using transition: all property, we are choosing background and box-shadow only. This is meant for performance.
    * I am using Custom Properties
*/    

:root{
    --site-transition: 300ms ease-in-out;
    --sticky-background-color: #ffffff;
    --sticky-text-color: #000000;
    --box-shadow: #00000029 0 0px 20px 0;
    --site-min-height: 100px;
    --sticky-min-height: 80px;
}

/* 
    * Styling container before sticky effects
*/
.sticky-header-container{
   transition: 
        background-color var(--site-transition),
        box-shadow  var(--site-transition),
        padding var(--site-transition);
}

/* 
    * for sticky effects
*/
.site-header-container.elementor-sticky--effects{
    background-color: var(--sticky-background-color);
    box-shadow: var(--box-shadow);
}

If you follow the step properly, this will happens, when the user scrolls down the page:

  1. Change the transparent background color to white and
  2. Add a box shadow to the container.

Shrink sticky header, site logo & Nav Menu when users scroll

If you recall properly we have added CSS classes to the container/ site logo & Navigation. Now, we are going to use it to shrink the sticky header when users scroll down the page.

Step#4(A): Shrink sticky Header

– Section/ Column Users

				
					/* 
* You need to add padding to the section.
* if you're using Flexbox container, you can use min-height property instead of padding.

/* 
    * For section and Column users
*/
.sticky-header-container{
    padding: 20px 0;
    /*20px padding on top and botton*/
    transition: 
        background-color var(--site-transition),
        box-shadow  var(--site-transition),
        padding var(--site-transition);
}

.site-header-container.elementor-sticky--effects{
  /*reduce to 10px padding on top and botton when sticky effects is applied*/
    padding: 10px 0;
    background-color: var(--sticky-background-color);
    box-shadow: var(--box-shadow);
}

– Flexbox Container users

				
					/* 
* Flexbox container users
*/
.sticky-header-container{
    min-height: var(--site-min-height);
    transition: 
        background-color var(--site-transition),
        box-shadow  var(--site-transition),
        min-height var(--site-transition);
}

.site-header-container.elementor-sticky--effects{
    min-height: var(--sticky-min-height);
    background-color: var(--sticky-background-color);
    box-shadow: var(--box-shadow);
}
Results

Or if you don’t like my padding method, You can watch the Official Elementor’s video Approaching using min-height property to create transparent sticky header.

Step#4(B): Shrink Site Logo width 

if you recall properly, we didn’t apply any styling to the site logo & nav menu widget it is mainly because we don’t want to overwrite with the important CSS rule.

In this step, I am targeting the Elementor image widget’s image tag and provide the width of 64px (change if needed) before the motion effects are applied, and then when the user scrolls down the page and the sticky effects are applied it will reduce the width of the image to 60px with some transition animations.

				
					/*
  * It works with Optimized DOM Output enable in Experiements settings.
  * You can use Percentage too instead of pixel value.
  * Adjust the width of the image as per your requirement
*/

.site-logo.elementor-widget-image img{
    width: 64px;
    transition: 
        width var(--site-transition),
        opacity var(--site-transition);
}

.elementor-sticky--effects .site-logo.elementor-widget-image img{
    width: 60px;
}

Step#4(C): Shrink Nav Menu and Change color

In this 4th step, we are going to shrink the Nav menu font size from 1.25rem to 1.2rem and change the color of the navigation menu when the user scrolls down from white to black color.

				
					.site-nav  .elementor-nav-menu--main .elementor-item
{
    color: var(--sticky-background-color, #fff);
    font-size: 1.25rem;
    transition: 
        color var(--site-transition),
        font-size var(--site-transition);
}

.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
    color: var(--sticky-text-color, #000);
    font-size: 1.2rem;
}
You can see the Results

(New Topic) Swap/ change logo on scroll

If you’re here just for shrinking the site header with Elementor below tutorials are not required.

Let me tell you one thing straight, there are lots of tutorials out there that teach you how to use content property to swap or change the logo.

Please don’t follow the CSS content-property tutorials. That is the first mistake I made.

See it for yourselves below. CSS Content-property did not work on Firefox.

Don't use Content property to swap your logo

If you’re using Hello Elementor Theme then there is no way to achieve these effects at all but it is possible with 3rd parties themes & plugins such as WP Astra pro.

I searched a lot on forums, Facebook groups, and videos but there were no tutorials available at that time. After trial and error, I found the solution I need ( read comments) and it works wonders.

Step#1(A): Drag and Drop the new Image widget next to the site logo widget & stack it together:

Now drag and drop the image widget next to your site logo widget (see the screenshot) and stack them on top of each other with a built-in absolute position feature.

Site logo & Image widget stack to each other with built-in absolute settings

Step#1(B): Give a CSS class to the new image widget

Providing CSS class to a new image widget

Step#1(C): Set the Image widget (second image) to absolute position

Set the Position to absolute

Step#1(D): Apply the image width as same as the site logo widget

I only add one line of a CSS rule (.site–logo-red.elementor-widget-image img) and all the CSS is the same as Step#4(B).

				
					/*
    * This CSS rule need to be applied 
    * .site--logo-red.elementor-widget-image img
*/
.site-logo.elementor-widget-image img,
.site--logo-red.elementor-widget-image img{
    width: 64px;
    transition: 
        width var(--site-transition),
        opacity var(--site-transition);
}

Step#1(E): Add Custom CSS to Change the Logo when users scroll down

				
					/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
      width: 60px;
      max-width: 60px;
}
           
   
/* 
    * We are switching the opacity from 0 to 1 when sticky effects is applied and switch to 0 when it is not applied.
    * Set the new image's opacity to Zero 
*/

.site--logo-red.elementor-widget-image img{
    opacity: 0;    
}

/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
    opacity: 1
}

.elementor-sticky--effects .site--logo.elementor-widget-image img{  
    opacity: 0
}

Thank you Breanna Berends for reporting me in time.

If you love it don’t forget to share or comment.

If I made any mistake don”t forget to add your comment. We will really appreciate and provide to give you credit.

Thank you

And please see the comment below to find all your answers

Full Snippets with changing site logo

				
					  /* 
* sticky-header-container is the CSS class, I have added to container - advanced tab
* Rather than using transition: all property, we are choosing background and box-shadow only. This is meant for performance.
* I am using Custom Properties
* Full CSS
* Mobile is not optimized
* Entire Code
*/    

:root{
    --site-transition: 300ms ease-in-out;
    --sticky-background-color: #ffffff;
    --sticky-text-color: #000000;
    --box-shadow: #00000029 0 0px 20px 0;
    --site-min-height: 100px;
    --sticky-min-height: 80px;
}

/* 
 * Styling container before sticky effects
*/
.sticky-header-container{
   transition: 
        background-color var(--site-transition),
        box-shadow  var(--site-transition),
        padding var(--site-transition);
}

/* 
* for sticky effects
*/
.site-header-container.elementor-sticky--effects{
    background-color: var(--sticky-background-color);
    box-shadow: var(--box-shadow);
}

/* 
* You need to add padding to the section.
* if you're using Flexbox container, you can use min-height property instead of padding.

/* 
* For section and Column users
*/
.sticky-header-container{
    padding: 20px 0;
    transition: 
        background-color var(--site-transition),
        box-shadow  var(--site-transition),
        padding var(--site-transition);
}

.site-header-container.elementor-sticky--effects{
    padding: 10px 0;
    background-color: var(--sticky-background-color);
    box-shadow: var(--box-shadow);
}

/* 
* Flexbox container users
*/
.sticky-header-container{
    min-height: var(--site-min-height);
    transition: 
        background-color var(--site-transition),
        box-shadow  var(--site-transition),
        min-height var(--site-transition);
}

.site-header-container.elementor-sticky--effects{
    min-height: var(--sticky-min-height);
    background-color: var(--sticky-background-color);
    box-shadow: var(--box-shadow);
}

/*
  * It works with Optimized DOM Output enable in Experiements settings.
  * You can use Percentage too instead of pixel value.
  * Adjust the width of the image as per your requirement
  * This CSS rule need to be applied 
  * .site--logo-red.elementor-widget-image img is updated
*/

.site-logo.elementor-widget-image img,
.site--logo-red.elementor-widget-image img{
    width: 64px;
    transition: 
        width var(--site-transition),
        opacity var(--site-transition);
}

.elementor-sticky--effects .site-logo.elementor-widget-image img{
    width: 60px;
}


/* 
* For site navigation
*/

.site-nav  .elementor-nav-menu--main .elementor-item{
    color: var(--sticky-background-color, #fff);
    font-size: 1.25rem;
    transition: 
        color var(--site-transition),
        font-size var(--site-transition);
}

.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
    color: var(--sticky-text-color, #000);
    font-size: 1.2rem;
}

/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
      width: 60px;
      max-width: 60px;
}
           
   
/* 
    * Change Logo steps
    * We are switching the opacity from 0 to 1 when sticky effects is applied and switch to 0 when it is not applied.
    * Set the new image's opacity to Zero 
*/

.site--logo-red.elementor-widget-image img{
    opacity: 0;    
}

/*
* When Sticky effects applied
*/
.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
    opacity: 1
}

.elementor-sticky--effects .site--logo.elementor-widget-image img{  
    opacity: 0
}

Do you know you can achieve the same effects with the free version of Elementor  & free 3rd parties plugin? Learn how to create with Six 3rd parties plugins for free.

Different Sticky header methods

  1. Elementor Hide Sticky Header on Scroll Down – Show on Scroll Up Elementor Codes
  2. Sticky On Scroll Up (wplovr)

  3. How to Create a Shrinking Sticky Header With Elementor

Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.