Skip to Main Content Skip Table of Content

How to create a sticky header with Elementor?

In this tutorial, I will show you how to create a sticky header with elementor without relying on 3rd parties plugins.

These are the topics we are discussing today-

  1. Create a transparent sticky header with Elementor
  2. Change the Sticky header color on the Scroll.
  3. Shrink the Sticky header, nav menu & Logo.
  4. Change the color of the Navigation menu, Button & Search icon when the user scrolls down.
  5. (New Topic) Change the site logo when users Scroll down the page.

Picture written how to create Elementor Sticky headers
On this Page:
  1. 1) Basic requirements & knowledge:
  2. 2) Create the Header Template
    1. 2.1) Step#1- Theme Builder
    2. 2.2) Step#2- Click the Add New button icon (+)
    3. 2.3) Step#3- Change the title and HTML tag for better semantics
    4. 2.4) Step#4- Create a structure
    5. 2.5) Step#5- Drag and Drop all the widgets inside the container
    6. 2.6) Step#6- Place all the items horizontally and align the items in the center
    7. 2.7) Step#7- Assign unique CSS classes to the widgets & Container
  3. 3) How to create a transparent sticky header with Elementor?
    1. 3.1) Step#1- Set the background color to the default value
    2. 3.2) Step#2- Access the Header’s Motion Effects
    3. 3.3) Step#3- Motion Effects settings
    4. 3.4) Step#4- Elementor sticky header change color on the Scroll effects
      1. 3.4.1) - Mix-Blend Mode CSS property (Demo)
    5. 3.5) Step#5- Shrink the Header’s height
    6. 3.6) Step#6- Shrink the Site Logo’s width
    7. 3.7) Step#7- Shrink the WordPress Menu and Change the Color
    8. 3.8) Step#8- Change the Button color on the scroll
    9. 3.9) Step#9- Change the search icon color
  4. 4) How to swap the logo on the scroll in Elementor?
    1. 4.1) Step#1- Drag and drop the new container widget next to the logo and WordPress Menu
    2. 4.2) Step#2- Reposition your old logo
    3. 4.3) Step#3- Drag and drop the new image widget inside the new container
    4. 4.4) Step#4- Provide a unique CSS class to the new image widget
    5. 4.5) Step#5- Set the new image’s position to absolute
    6. 4.6) Step#6- Add custom CSS to change the logo
  5. 5) Full CSS Code Snippets
  6. 6) Different Elementor Sticky Header methods

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

If you’re looking for a tutorial, you’re in the right place.

I have created a demo where you can experience. visit the link to experience Elementor sticky headers in action.

If you like to import this exact template on your projects, you can purchase it from my store at 10USD.

To create a sticky header with Elementor for myself. I have searched the internet and found a bunch of tutorials and most of them are simply copying and pasting the same CSS provided by the Official Elementor YouTube channels.

I thought why not create an in-depth how-to tutorial that is well-tested & it doesn’t rely on any JavaScript or 3rd parties plugins?

Basic requirements & knowledge:

  1. To fully utilize sticky effects functionalities in Elementor, you will need a Pro license. 
  2. You need to enable Flexbox container features in Elementor (Backend) > Settings > Featured > to activate the Flexbox Container.
    Flexbox Container experiments
  3. 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.
  4. You need to add vendor browser prefixes for better browser compatibility, you can use Autoprefixer which is easy and free to use.

Create the Header Template

  1. Activate the Default to New Theme Builder features.
  2. Activate the Flexbox Container features.

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- Theme Builder

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

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

Picture showing all the templates from Elementor's Theme Builder

Step#2- Click the Add New button icon (+)

To create the site header, click the add new (+) icon and choose the header. 

Click the Header plus icon to create a header template

After you choose the header template, it will lead to Elementor’s Block. From there, you can choose the prebuilt templates or block or create the template from scratch or Buy it from my Unlimited Elements for Elementor store.

Elementor's Blocks

I create the template from scratch.

Elementor Header

Step#3- Change the title and HTML tag for better semantics

Now, click the cog icon (settings) on the bottom left corner to open the Header’s settings from there you can change the title and the HTML tag for better HTML5 semantics.

To open the template settings, click the cog bottom icon (settings)

Change the HTML tag to header under general settings

Step#4- Create a structure

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

Step#5- Drag and Drop all the widgets inside the container

Now drag and drop all the widgets inside the page structure and it will look something like this.

Default view / Stack view when you drag and drop all the widgets inside the container

  1. Site Logo widget
  2. Nav Menu/ WordPress Menu widget
  3. Button

Step#6- Place all the items horizontally and align the items in the center

Place items to Center

  1. Click the Container’s Editing Handle
  2. Under Items change the direction to Row – Horizontal
  3. Set the Justify Content to space-between.
  4. Align items to the center, so the items will be aligned to the center

If you want to know what is going on, you can learn how CSS flexbox layout works.

It will look something like this after you set it up

Now we properly set up the design and layout of the template. Our next step is to assign unique CSS classes to the widget so that later on, we can use it.

Step#7- Assign unique CSS classes to the widgets & Container

Now assign unique CSS classes to the container and widgets (Button, Search icon, Navigation & Site Logo).

If you want to know how to assign unique CSS classes to your widgets, follow Elementor’s Tutorial on How To Use Selector In The Custom CSS Tab.

How to create a transparent sticky header with Elementor?

Step#1- Set the background color to the default value

By default, the background color of the sections/ containers/ widgets is automatically set to transparent. So just leave it as it is.

Tips:
Sometimes a theme includes its background color to solid, if you have this issue 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

This basically creates a transparent header

Step#2- Access the Header’s Motion Effects

To access the sticky effects features, you will have to click the Header’s Editing handle (see the attachment below), this will automatically open the advanced settings

To enabled sticky effects on a header, click the editing tools this will lead to advanced settings and from their click the motion effects

  1. When you click the Editing handle.
  2. It will automatically open the advanced settings from there.
  3. Click the motion effects to enable the sticky options in Elementor and add set up the options.

Step#3- Motion Effects settings

Under motion effects, set the sticky to top (so it sticky to the top of the page) and set the effects offset to 100

  1. Set the sticky to the top (so it sticks the header on top when the user scroll down) &
  2. And Effects Offset to 100

Effects Offset” lets you determine when the effects will occur according to scrolling distance in pixels.

Step#4- Elementor sticky header change color on the Scroll effects

In our previous step, we enabled the sticky effect under motion effects. Now, let’s change the color of the background from transparent to solid color with CSS when users scroll down the page.

        
        /* 
* Define your own background color for default and sticky
* CSS Blend-mode rule is not included
*/

:root{
    --site-transition: 350ms ease-in-out;
    
}

/*
* Elementor Sticky Header change color on Scroll
* Change the color from transparent to white 
*/

.sticky-header-container{   
    background-color: #00000000;
    transition:        
        background-color var(--site-transition),
        box-shadow var(--site-transition);
}

.elementor-sticky--effects.sticky-header-container{   
    background-color:  #ffffff;
    box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
}

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

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

See the result below 

If you want to spice things up, you can use the mix-blend-mode CSS property to change the color of the header. 

        
        /*
* CSS blend-mode is included
*/

:root{
    --site-transition: 350ms ease-in-out;
    
}

/*
* Elementor Sticky Header change color on Scroll
*/

.sticky-header-container{   
    background-color: #00000000;
    transition:        
        background-color var(--site-transition),
        box-shadow var(--site-transition);
}

.elementor-sticky--effects.sticky-header-container{   
    background-color:  #fffffff;
    box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;   
    mix-blend-mode: difference;
      /*    
           mix-blend-mode: normal;
           mix-blend-mode: multiply;
      */
}

- Mix-Blend Mode CSS property (Demo)

If you recall properly, we have added CSS classes to the container, site logo, nav menu widget & button. 

Step#5- Shrink the Header’s height

The CSS below is the same as the transparent Sticky header change color (Code snippets) but with an additional min-height & transition to the min-height CSS property.

        
        /*
* Elementor Sticky Header change color on Scroll &
* Shrink sticky Header
*/

.sticky-header-container{
    --min-height: 90px;
    background-color:#fbfbfb;
    transition: 
        min-height var(--site-transition),
        background-color var(--site-transition),
        box-shadow var(--site-transition);
   
}


.elementor-sticky--effects.sticky-header-container{
    --min-height: 80px;
    background-color:  #F9E0E2;
    box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
     
}
Results

Step#6- Shrink the Site Logo’s width

To reduce the site logo width, we can use the width CSS property but in-term of animation performance, CSS transform, and transform-origin property is far better. 

        
        /*
*  Using transform CSS property is much better than width properties to scale in terms of performance
*/
.site--logo{
    transform: scale(1);
    transform-origin: center;
    transition: 
        transform var(--site-transition),
        transform-origin var(--site-transition);
}


.elementor-sticky--effects .site--logo{
      transform: scale(.9);
}

Step#7- Shrink the WordPress Menu and Change the Color

In this step, we are going to shrink the navigation menu font size from 1.25rem to 1rem and change the color of the navigation & sub-menu icon (SVG) from white to black color when the user scrolls down. 

        
        /*
* Navigation
*/

.site-nav  .elementor-nav-menu--main .elementor-item{
    color: #000;
    font-weight: 600;
   font-size: clamp(1rem, 0.8182rem + 0.6061vw, 1.25rem);
   transition: 
        color var(--site-transition),
        font-size var(--site-transition);
}

.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
    font-size: clamp(1rem, 0.8636rem + 0.4545vw, 1.1875rem);
    color: #fff;
}


/*
*   Sub Menu icon
*/
.site-nav .elementor-nav-menu .sub-arrow {
    color: #E23125;
    fill:  #E23125;
    transition: 
        fill var(--site-transition), 
        color var(--site-transition);
}

.elementor-sticky--effects .site-nav .elementor-nav-menu .sub-arrow{
    color: #000;
    fill:  #000;
}

/*
* Hamburger Menu, Close and open SVG
*/


.site-nav .elementor-menu-toggle{
    background-color: #000;
    transition: background-color var(--site-transition);
    border-radius: 0;
   
}

.site-nav .elementor-menu-toggle .e-font-icon-svg,
.site-nav .elementor-menu-toggle .e-font-icon-svg{
    fill: #fff;
    color: #fff;
     transition: 
        fill var(--site-transition),
        color var(--site-transition);
}


.elementor-sticky--effects .site-nav .elementor-menu-toggle{
    background-color: #fff
}

.elementor-sticky--effects  .site-nav .elementor-menu-toggle .e-font-icon-svg,
.elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg{
    fill: #000;
    color: #000;
}
You can see the Results

Step#8- Change the Button color on the scroll

In this step, we are going to change the color of the button when users scroll the page.

        
        /*
*   Button
*/

.sticky-btn .elementor-button{
    background-color: #000000;
    transition: 
        background-color var(--site-transition);
}

.sticky-btn .elementor-button-text{
    color: #fff;
    transition: color var(--site-transition);
    
}

.elementor-sticky--effects .sticky-btn .elementor-button{
    background-color: #fff;
}

.elementor-sticky--effects .sticky-btn .elementor-button-text{
    color: #000;    
}
You can see the Results

Step#9- Change the search icon color

In this step, we are going to change the color of the button when users scroll the page.

        
        /*Search icon*/
.search-icon svg.e-font-icon-svg, 
.search-icon i.e-font-icon-svg{
    fill: #000!important;
    color: #000;
    transition: fill var(--site-transition);
}


.elementor-sticky--effects .search-icon svg.e-font-icon-svg, 
.elementor-sticky--effects .search-icon i.e-font-icon-svg{
    fill: #fff!important;
    color: #fff;
}
You can see the Results of Site Search icon

How to swap the logo on the scroll in Elementor?

If you’re here just for shrinking the site header in 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 CSS content property to swap the logo.

The problem I found is that it, the logo was not-clickable when swapped and thus sucks. So please don’t follow the content CSS property tutorials. 

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.

Best theme for Elementor

Or follow my tutorial

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 needed ( read the comments) and it works wonders.

Step#1- Drag and drop the new container widget next to the logo and WordPress Menu

it will look something like this

Drag and Drop container widget next to logo and WordPress Menu widget

Reposition your site logo into container

Adjust your logo width, if you set it up.

Result after the logo is drag inside the new container

Step#3- Drag and drop the new image widget inside the new container

Now, drag and drop a new image widget inside the new container and it will automatically stack together vertically as shown below.

Stack site logo and image widget in a container

You can also create an image widget with Unlimited Elements for Elementor Addons.

Step#4- Provide a unique CSS class to the new image widget

Providing CSS class to a new image widget

Step#5- Set the new image’s position to absolute

When you set the image position to absolute, it will remove from the DOM tree and it will automatically stack together on top of each other if you didn’t create a container you will have to adjust a lot.

It will look something like this

Image remove from flow due to absolute positining

        
        .site--logo{
    transform: scaleX(1);
    transform-origin: center;
    transition:  
        opacity var(--site-transition),
        transform var(--site-transition);
}



.elementor-sticky--effects .site--logo{
      transform: scale(.95);
}


.elementor-sticky--effects .site--logo-red{
    opacity: 1;
    transform: scale(.95);
}

.site--logo{
    opacity: 1;
}

.site--logo-red{
    opacity: 0;
}


.elementor-sticky--effects .site--logo{
    opacity: 0;
}


.elementor-sticky--effects .site--logo-red{
    opacity: 1;
    transform: scale(.95);
}
Result
Thank you, Breanna Berends, for reporting me in time for an issue.

Full CSS Code Snippets

        
        /* 
* Define your own background color for default and sticky
* CSS Blend-mode rule is not included
*/

:root{
    --site-transition: 350ms ease-in-out;
    
}

/*
* Elementor Sticky Header change color on Scroll
*/

.sticky-header-container{ 
    --min-height: 100px;
    background-color: #00000000;
    transition:        
        background-color var(--site-transition),
        box-shadow var(--site-transition),
        min-height var(--site-transition);
}

.elementor-sticky--effects.sticky-header-container{   
     --min-height: 90px;
    background-color:  #000000;
    box-shadow: hsl(0deg 0% 0% / 14%) 0 2px 40px;
}




/*
*  Using transform CSS property is much better than width properties to scale in term of performance
*/
.site--logo{
    transform: scale(1);
    transform-origin: center;
    transition: 
        transform var(--site-transition),
        transform-origin var(--site-transition);
}


.elementor-sticky--effects .site--logo{
      transform: scale(.9);
}




/*
* Navigation
*/

.site-nav  .elementor-nav-menu--main .elementor-item{
/*
* Add your own color
*/
    color: #000;
    font-weight: 600;
   font-size: clamp(1rem, 0.8182rem + 0.6061vw, 1.25rem);
    transition: 
        color var(--site-transition),
        font-size var(--site-transition);
}

.elementor-sticky--effects .site-nav .elementor-nav-menu--main .elementor-item{
    font-size: clamp(1rem, 0.8636rem + 0.4545vw, 1.1875rem);
    color: #fff;
}



/*
*Hamburger Menu
*/
.site-nav .elementor-menu-toggle{
    background-color: #000;
    transition: background-color var(--site-transition);
    border-radius: 0;
   
}

.site-nav .elementor-menu-toggle .e-font-icon-svg,
.site-nav .elementor-menu-toggle .e-font-icon-svg{
    fill: #fff;
    color: #fff;
     transition: 
        fill var(--site-transition),
        color var(--site-transition);
}


.elementor-sticky--effects .site-nav .elementor-menu-toggle{
    background-color: #fff
}

.elementor-sticky--effects  .site-nav .elementor-menu-toggle .e-font-icon-svg,
.elementor-sticky--effects .site-nav .elementor-menu-toggle .e-font-icon-svg{
    fill: #000;
    color: #000;
}



/*
*   Button
*/

.sticky-btn .elementor-button{
    background-color: #000000;
    font-weight: 600;
    border-radius:0;
    border: none;
    transition: 
        background-color var(--site-transition);
}

.sticky-btn .elementor-button-text{
    color: #fff;
    transition: color var(--site-transition);
    
}

.elementor-sticky--effects .sticky-btn .elementor-button{
    background-color: #fff;
}

.elementor-sticky--effects .sticky-btn .elementor-button-text{
    color: #000;
    
}


/*Search icon*/
.search-icon svg.e-font-icon-svg, 
.search-icon i.e-font-icon-svg{
    fill: #000!important;
    color: #000;
    transition: fill var(--site-transition);
}


.elementor-sticky--effects .search-icon svg.e-font-icon-svg, 
.elementor-sticky--effects .search-icon i.e-font-icon-svg{
    fill: #fff!important;
    color: #fff;
}

.site--logo{
    transform: scaleX(1);
    transform-origin: center;
    transition:  
        opacity var(--site-transition),
        transform var(--site-transition);
}



.elementor-sticky--effects .site--logo{
      transform: scale(.95);
}


.elementor-sticky--effects .site--logo-red{
    opacity: 1;
    transform: scale(.95);
}

.site--logo{
    opacity: 1;
}

.site--logo-red{
    opacity: 0;
}


.elementor-sticky--effects .site--logo{
    opacity: 0;
}


.elementor-sticky--effects .site--logo-red{
    opacity: 1;
    transform: scale(.95);
}

Different Elementor 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
  4. Transparent Sticky header with free plugins 

If you love it don’t forget to share or comment and wanted to support me you can purchase my template from my store.

Also, read all the comments if I made any mistakes or share your finding.

Thank you

 

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.

Scroll up further to Load all the comments...