Skip to Main Content

How To Create a Sticky Header with Elementor without using any 3rd parties plugins

In this step-by-step article, we will learn how to create a sticky header with Elementor pro without using any 3rd parties addons.

We will also discuss-

  • Learn how to change sticky header change background color on scroll
  • Learn how Change logo on scroll in Elementor
  • Learn how to change transparent header to sticky header
  • Learn how to shrink header when sticky header is applied and when user scroll

Sticky header in WordPress using Elementor

One of the most common questions, I have found on Elementor Official Groups & GitHub is how to create Sticky Header with Elementor by taking this question as an example and for learning CSS in-depths.

To create the sticky header and a bunch of Elementor's sticky effects from scratch. I have to dig up a bunch of tutorials found 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 well tested without relying on extra JavaScript or any 3rd parties plugins or addons.

Watch the video & see the results

If you decided not to spend hours configuring your header, you can buy the template for 10USD.

So, if you've Elementor pro and don't want to rely on 3rd parties add-ons this is the tutorial for you.

In this post, I will show you a step-by-step guide.

What you'll learn

  1. How to create transparent sticky header with Elementor Pro
  2. Change the transparent background color to solid.
  3. Swap or change the Logo when users Scroll down the wheel when Elementor's motion effects is applied
  4. change the navigation color when scroll

Basic Requirements & Knowledge-

  1. To work properly, 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 compaitability use Autoprefixer

Create the Header Template

Step#1(A): Templates - Add new

Hover your mouse over the Elementor's Templates area (backend) and click the Add New button to create a template.

  1. Hover your mouse to the Templates
  2. Click the Add New Button
Picture showing how to create header template with Elementor pro

Step#1(B): Select 'Header' from the list and give a name for future reference

After you click the add new button, Modal will appear, and from there, you will have to select the header from the list and give a proper name for future reference & then click the Create template to create your site header.

  1. Choose the header template as the type of Template.
  2. Give a name for future reference
  3. Click the Create template.
Next step is to create header template

Create Transparent Header

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

Step#2(A): Select your structure (As per requirement)

  1. Select 2 or 3 columns and create the structure of the layout
second step is to create Structure of page

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

Now drag and drop all the widgets inside the page structure and provide CSS classes to the widget under advanced tab (see the screenshot below for reference)

click the section tab to open section settings then head over to advanced tab and add your CSS class
Give CSS class to the section
CSS Class for Site Logo
Give CSS class to the site Logo
Add class to Site navigation
Give CSS class to the Nav menu widget

Step#2(C): Vertical Align to Center and set the HTML tag to Header

  1. Click the Section Handle to open layout tab
  2. Vertical align to center (screenshot below for reference) to align all the content inside the section to the middle
  3. Click the HTML tag and Choose 'header' as shown in screenshot below
Set the Vertical Align to Center to align all the content to the center
Vertical Align to center
Select Header as HTML tag for Accessibility
HTML tag to header for semantic

Step#2(D): Change the background color to None or reduce the opacity (alpha color) to 0

Keep this in mind that some themes might overwrite the style. So disabling the theme feature will help.
  1. Click the section handle this will open Layout tab.
  2. Navigate the style tab and choose background.
  3. Under Normal tab click the background type (paint icon) and click the classic.
  4. Reduce the alpha color or opacity to zero as shown on the picture below.
Reduce the opacity to zero.

Transparent sticky Header with Elementor pro

In this step, we are going to create a transparent sticky header in WordPress using Elementor that change the background color and also at the same time it will shrink the header when users scroll down the page.

Step#3(A): Set the z-index to 100 or more

  1. Click the section handle.
  2. Go to Advanced tab
  3. Set the section z-index to 100 or more.
Set the section Z-index to 100 or more

Step#3(B): Motion effects and set the sticky to top or bottom and set the effects offset to 50px or more-

  1. Navigate to the section/header handle
  2. Click the Advanced tab
  3. Click the Motion Effects
  4. Sticky to top: to stick the section to the top
  5. Give a value of 50px or more to the Effects Offset.

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

Header settings

How To Change Sticky Header Color On Scroll

Padding is not necessary, if you're just changing the background color of the sticky header.

Header settings
Add a transition to the header
    * sticky-header is the CSS class, we have added to section- advanced tab
    * For smooth animation when user scrolls, we have added transitions to background color, box shadow & padding (later).
    * !important is added, so it overwrite theme style or Elementor's style
    * I am using Custom Properties

--transition: 300ms ease-in;

   Background-color: transparent!Important;
        background-color var(--transition),
        box-shadow  var(--transition);

Our idea is to set up sticky header, so when user scrolls down, transparent background color changes to solid color and give a box shadow.

To get the smooth transition when scroll down and scroll up, we have added transition to the background color and box-shadow. (see the code above)
    * if you change the background color to transparent in Elementor editor, you might want to add !important.
    *  box shadow effects will apply when user scroll that why we add the transition to sticky-header class.

    background-color: #fbfbfb!important;
    box-shadow: #00000029 0 0px 20px 0;

How to Shrink header on scroll

This CSS is same as step 4, so don't copy the entire code. I use Adding to adjust height on top and bottom. If you don't want it you can use Elementor's min-height methods.


padding: 2% 0;
   Background-color: transparent!Important;
        background-color var(--transition),
        box-shadow  var(--transition),
        padding var(--transition);

To reduce the height of the site header, we have to reduce the padding to 1% on both top & bottom. So when user scroll down the pages, padding will also reduce and shrink the header

    padding: 1% 0;
    background-color: #fbfbfb!important;
    box-shadow: #00000029 0 0px 20px 0;
See the Result:

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

7th and 8th steps are mainly for shrinking logo & changing the colour of the navigation menu.

Shrink the site logo and Navigation Menu on scroll

Step#6(A): Site Logo Widget

We have added CSS classes to the 'Site Logo' and 'nav menu' widget as 'site--logo' and 'nav-menu' respectively in step#2(B).

Now we add this CSS to shrink the logo.
  1. Click the Site logo handle
  2. Go to Advanced tab
  3. Under advanced tab go to Custom CSS & add the css
CSS for site logo
Defining the width of site logo in pixels or percentage and add the transition so it doesn't cause any janky animations
  * It works with Optimized DOM Output enable in Experiements settings.
  * You can use Percentage too instead of pixel value.

.site--logo.elementor-widget-image img{
    width: 120px;
    transition: width var(--transition);


Now we have to add Custom CSS to the Site logo widget to shrink the logo when scroll down.

Reduce the width of the image to 100 pixel when user scroll down
Reducing the width of site logo to 100px so when users scroll down it shrinks
* Elementor use elementor-sticky--effects, we are simply leveraging its CSS class.
*Now Logo will reduce to 100px before it was 120px on scroll.

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

Step#6(B): Nav Menu widget

We have to do same thing to our nav menu widget too like site logo but I will focus on Color and font size instead.

  1. Click the Nav menu widget handle
  2. Go to Advanced tab
  3. Custom CSS
CSS for Site Logo widget
Adding color, font size and transition to the navigation menu.

If you do not want to reduce the font-size, remove the font-size rule.


.nav-menu  .elementor-nav-menu--main .elementor-item{
    color: #000000;
   font-size: 1.25rem;
        color var(--transition),
        font-size var(--transition);

When Sticky Effects is applied to the navigation menu ( .nav-menu )

Sticky effects applied to navigation Menu
change the color of the navigation menu item and reduce the font-size of 1rem when sticky effects is applied

.elementor-sticky--effects .nav-menu .elementor-nav-menu--main .elementor-item{
  color: red;
  font-size: 1rem;

Change logo on scroll in Elementor

Watch the video & see the results

Let me tell you one thing, there are lots of tutorials out there teaches you how to use CSS content property to swap or change logo.

Please don't follow the tutorials. That is the first mistake I made.

See it for yourselves below.
Dont use CSS 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, videos but there were no tutorials available at that time. After trial and errors, I found the solution I need ( read comments) and it works wonder.

Follow the steps-

Step#7(A): Drag and Drop Another Image widget & stack it together :

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

Site logo next to each

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

Giving CSS class to an image widget

Step#7(C): Provide Same width in pixels as an old image and define opacity-

Now, provide the new image width of 100px (your requirement) as same as old site logo widget. So it look consistent

Giving CSS class to an image widget
* We are combining the old CSS of site logo widget (step#6(A) CSS) with the new image widget CSS
* We are applying an opacity to zero on second image widget, so it is not visible to the user.
.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
    width: 120px;
    transition: opacity var(--transition),
                width var(--transition);

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

  1. Click the 2nd Image widget handle
  2. Navigate to Advanced tab.
  3. Click the positioning setting.
  4. Select the Position to Absolute.
  5. 2nd image will overlap/ stack to site logo widget
Set the position of the image to absolute to overlap one another

Step#7(D)Step#7(E): Add CSS to Change the Logo when users scroll

Apply CSS to new image widget

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

.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
      width: 100px;
      max-width: 100px;
* We are switching the opacity from 0 to 1 when sticky effects is applied and switch to 0 when not applied.

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

.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 be really appreciate and provide to give you credit.

Thank you

And please see the comment below to find all your answers

Transparent sticky header with free plugin

You can choose which plugin is the best for you from six 3rd parties plugins or addons that are free can accomplished the same effects as Elementor pro

Different approach, you can rely on.

  1. Full CSS Code related to this post (using padding method)
  2. Elementor YouTube Channel(Min-height)
  3. Elementor Hide Sticky Header on Scroll Down – Show on Scroll Up Elementor Codes
  4. Sticky On Scroll Up (wplovr)
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.