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 to swap/ logo when scroll
  • 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
  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 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.

Create Transparent sticky Header

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

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

Change sticky header background color on Scroll

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

Header settings
Provide padding and 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
    */    

: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 header background color will change to solid white and give a box shadow.

To get the smooth transition, 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;
}
    

Shrink the sticky 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 header, we have to reduce the padding to 1%. So when user scroll down, padding will reduce.
    

.sticky-header.elementor-sticky--effects{
    padding: 1% 0;
    background-color: #fbfbfb!important;
    box-shadow: #00000029 0 0px 20px 0;
}
    
See the Result:

Or, 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;
    transition: 
        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

If you’re using Hello Elementor Theme then there is no way to achieve these effects at all but possible with 3rd parties themes 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 Image widget :

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(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;
    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
}  
    
    

See the Result

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)