How To Create a Sticky Header in WordPress using Elementor without 3rd parties plugins

This is one of the most common questions, I have found on Elementor Official Groups or any Elementor Facebook groups or GitHub on the topic of how to create transparent Sticky Header in Elementor by taking the question as an example of learning CSS in-depths.

I was on a journey to learn on how to create from scratch but some tutorials are good to follow but other are simple copying and pasting the same CSS from Official YouTube channels and post it on their blog post which is totally not helpful at all and unreliable .

I thought of writing a comprehensive in-depth tutorial on how to create sticky header in WordPress using Elementor pro plugin without using relying on extra JavaScript or any 3rd parties plugins or addons.

See the Result

But if you've Elementor pro and don't want to rely on 3rd parties plugin this tutorials is build for you.

In this post, I will going to show you how it is done in step-by-steps guide.

If you want me to improve anything please please let me know on the comment section below.

Lists of points will discuss:

1. How to Create sticky header with transparent background.
2. Change the transparent background color to solid background color, Shrink the header, swap logo, color of navigation everything will acieve after when users scroll down.

Basic Requirements & Knowledge-

1. To work properly you will need Elementor Pro . if you haven’t upgraded it yet please use my Affiliate link above, this commission comes at no additional cost to you but it will keep the website a little help and write more comprehensive content just for you.
2. You need to add your own Media Queries to make your site Mobile responsive.
3. Issue with Horizontal side scrolling on Mobile (command /control click to open in new window) follow my tutorials, this will help you identified the issue and helps you debug your problems and save you big time.
4. Use this free Browser prefix in your projects and improve browsers compaitability.

Steps#1: Create the Header Template

i) Templates - Add new

Hover your mouse to the Templates area and then click the Add new button to create a template.

1. Hover your mouse to the Templates
2. Click the Add New Button

ii) Select 'Header' from the list and give a name for future reference

After you click the add new button, pop up will appear and from there Select Header from the list and give a proper name for your template for future reference.

1. Choose header templater
2. Give a name for future reference
3. Click the Create template.

Steps#2 : Create Transparent Header

i) Select structure (add as per your requirement and align properly)

We have to create the structure with two-column that are wrapped with section tag ( Default) and please adjust as per your requirement.

1. Select 2 or 3 columns and create structure

ii) For accessibility purpose or best practices, choose Header as HTML tag

1. Click the Section Handle to open layout tab
2. Click the HTML tag and Choose 'header'

Let change the background color to None or reduce the opacity to 0

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 color or change the opacity to zero as shown on the picture below or ignore it

Steps#3 : 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

.

i) Add CSS classes or an ID to the section

1. Click the section handle.
2. Go to Advanced tab
3. Provide an unique CSS Class or an ID below z-index in Advanced setting

ii) Give more than 50px to Effects offsets -

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

^*"Effects Offset" lets you determine when the effects will occur according to scrolling distance in pixels i.e 50px in our example.

Steps: #4: How to Change header background color on Scroll

All the code related to Steps: #5 and Steps: #6 are similar Before sticky:

    
        
    /* 
    *Copy and paste this code
    * You can also use custom properties which is better
    * I can also use min-height method prescrie by Elementor.
    * sticky-header is the CSS classes we have added to section- advanced.
    * We are adding padding on top and bottom of the site header to add space between columns.
    * For smooth animation when user scrolls, we have added 300ms with ease-in transitions to background color, box shadow & padding.
    */    


.sticky-header{
   Background-color: transparent!Important;
   transition: 
        background-color 300ms ease-in,
        box-shadow  300ms ease-in,
        padding 300ms ease-in;
}

    

After sticky:

    
                
    /* 
    * if you change the background color to transparent in Elementor editor, you might want to add !important.
    * I'm also adding box shadow to header.
   
    */    

.sticky-header.elementor-sticky--effects{
    
    background-color: #fbfbfb!important;
    box-shadow: #00000029 0 0px 20px 0;
}
    

Steps: #5: How to Shrink Header on scroll

Before sticky-

    
        
    /* 
    *Copy and paste this code
    * You can also use custom properties which is better
    * I can also use min-height method prescrie by Elementor.
    * sticky-header is the CSS classes we have added to section- advanced.
    * We are adding padding on top and bottom of the site header to add space between columns.
    * For smooth animation when user scrolls, we have added 300ms with ease-in transitions to background color, box shadow & padding.
    */    


.sticky-header{
   padding: 2% 0;
   transition: 
        background-color 300ms ease-in,
        box-shadow  300ms ease-in,
        padding 300ms ease-in;
}

    

After sticky

    
                
    /* 
    * if you change the background color to transparent in Elementor editor, you might want to add !important.
    * I'm also adding box shadow to header.
   
    */    

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

Result of transparent sticky header change background & shrink header on scroll.

Or, You can watch the Official Elementor's video Approach using min-height property to create transparent sticky header

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

Steps#6 : Drag and Drop Site Logo & Nav Menu widget to your structure

If you don’t want to add !important to your CSS to overwrite it, do not style anything to your Logo and Nav menu widget.

i) Drag and drop Site logo widget and add CSS class

1. Click the Site Logo widget handle
2. Now go to Advanced Tab
3. Under Advanced settings fill up or add CSS class for logo as site-logo (screenshot for reference)

iii) Add CSS Class to Nav menu widget as well

The same step goes to nav menu widget too.

Steps to follow :

1. Click the Nav (navigation) widget
2. Click the Advanced Tab
3. Under Advanced tab – Add CSS classes as nav-menu ( screenshot for reference)

Steps#7 : Shrink the site logo and Navigation Menu on scroll

i) For Site Logo Widget

We have added CSS classes to the Site Logo and Site Navigation widget as 'site--logo' and 'nav-menu' respectively.

Now we will add 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.
*/

.site--logo.elementor-widget-image img{
    width: 120px;
    transition: width .3s ease-in;
}

    
    

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

    

.elementor-sticky--effects .site--logo.elementor-widget-image img{

/* 
*Logo will reduce to 100px before it was 120px
*/
    width: 100px;
}

ii) For 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

Before sticky header effects applied

    
.nav-menu  .elementor-nav-menu--main .elementor-item{
    color: #000000;
   font-size: 18px;
    transition: color 300ms ease-in, font-size 300ms ease-in;
}
        
    
    

When Sticky Effect is Applied on navigation menu( .nav-menu )

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

Steps: 8 How to change logo on Sticky header with Elementor pro on scroll

If you’re using Hello Elementor Theme then there is no way to achieve these effects at all but possible with themes.

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.

i) Drag and Drop Image widget :

Now drag and drop image widget next to your site logo widget (see the screenshot).

ii) Give a CSS class to the new image widget

iii) Same width to an old image and defining opacity-

Now, give the new image width of 100px or your requirement as same as old site logo widget. So it look consistent or combine will old one.

    
.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
    width: 120px;
    transition: opacity 300ms linear,
                width 300ms linear;
}

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

iv) Set the position to absolute to 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 to your site log widget

iii) 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 300ms linear, 
				width 300ms linear;
}


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

.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

if you're busy, Hire me

Thank you everyone for pointing me to right direction

Different approach, you can rely on.

1. FIll up the form (no need to sign up)
2. Full CSS Code related to this post
3. Elementor YouTube Channel
4. Elementor Hide Sticky Header on Scroll Down – Show on Scroll Up Elementor Codes
5. Sticky On Scroll Up (wplovr)