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

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.

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

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.

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

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)

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

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.

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.

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.

How To Change Sticky Header Color On Scroll

Padding is not necessary, if you're just changing the background color of the sticky 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
    */    

:root{
--transition: 300ms ease-in;
}

.sticky-header{
   Background-color: transparent!Important;
   transition: 
        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.
    */    

.sticky-header.elementor-sticky--effects{
    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.

    



.sticky-header{
padding: 2% 0;
   Background-color: transparent!Important;
   transition: 
        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

    

.sticky-header.elementor-sticky--effects{
    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

    
        
/*
  * 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.

    
        
   
/* 
* 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

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;
    transition: 
        color var(--transition),
        font-size var(--transition);
}
        
    
    

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

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

Change logo on scroll in Elementor

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.

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.

Step#7(B): Give a CSS class to the new 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

    
                   
   
/* 
* 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;
    
}    
    
    

Step#7(D): Set the position to absolute on 2nd logo

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

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

    

.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
    width: 120px;
    max-width: 120px;
    transition: 
        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

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)