How To Create a Sticky Header with 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 Sticky Header with Elementor by taking the question as an example of learning CSS.

I was on a journey to learn on how to create sticky header from scratch but some tutorials are good to follow but other are simple copy and paste CSS and post it on their post from Elementor YouTube channel which is totally not helpful at all and reliable .

I thought of writing comprehensive guide on how to create sticky header with elementor without using any extra JavaScript or any plugins or addons, just using what Elementor is provided with Elementor pro. But i couldn't find it because most of them are just copy and paste from official Elementor YouTube channels.

It can be done the same effects using 3rd party addons or Plugins like Sticky Header Effects for Elementor  but it doesn't have the option to swap logo and change navigation color ( Available on Pro version)

But this blog post is all about Elementor pro and CSS available i.e elementor-sticky--effects. If you are like me and doesn’t want to rely too much on 3rd parties plugins. This blog post is for you and I will show you how it is done step-by-steps with videos and Images. If you want me to improve anything please please let me know on the comment section below.

Following lists of points are covered on this post

1. How to Create Sticky Header with Elementor.
2. How do I make the header transparent in Elementor ?
3. How to shrink header on scroll with Elementor pro.
4. How do I change the header background color on scroll?
5. How to switch logo / swap logo when users scroll down.
6. How to change color of navigation color when scroll down
7. How to create sticky header in Elementor that change color on scroll

Requirements-

1. In order to work properly you will need Elementor Pro . if you haven’t upgraded it yet please use my Affiliate link, 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 in order to make your site Mobile responsive. Follow Kevin Powell YouTube Video  and if you have Mobile responsive issue like scrolling side way on Mobile use my tutorials this will help you identified the issue and you can fix it really easy.
3. There is No Browser prefix in this tutorials,you can get it from here for free Browser prefix.
4. If you don’t have pro version of Elementor, you can use 3rd parties plugin to create transparent sticky header (Tutorials)

01

Steps#1- Create Elementor Header Template

i) Dashboard - Templates (hover) - Theme Builder

You need to hover to Templates then Theme builder to access Elementor theme builder templates area.

1. Go to Templates by ( Hover or click)
2. Click the Theme Builder area
3. Then Header

ii) Add New - Select the type of template ( Choose Header) - Give a name ( Future reference) -Create Template

From there click the Add New button on Top left corner. When you click the button it will prompt you to create New template show in screenshot below.

 

Choose Header type and give a unique name for Future reference so it doesn’t messed up if you have multiple header

1. Click the Add New Button on Top left corner
2. It will prompt you to create New Template type
3. Choose Header as the type of template
4. Give the proper name of the Template for Future reference
5. Click the Create template.

02

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 structure that can consist of 2 or 3 columns
2. Eventually, the two-column structure will wrap in section tag.

ii) Set the HTML tag under the overflow tab

Follow the steps-

1. Click the Section Handle to open layout tab
2. Go to Layout tab then
3. Below Overflow tab there is HTML tag
4. Choose header as HTML tag ( As per HTML 5 requirement)

My current set up right now :

1. Create two-Column layout structure
2. Click the section handle this will open section's layout tab
3. Go to Vertical Align and set it to Middle (This will align all the content to middle)
4. Head over to Style tab and set the Background color to None. ( by Default is none)

iii) Give CSS classes to the Section

Now we have to add classes to the header's section. So we can easily style the way we want.

1. Click the Section handle
2. Click Advanced tab (cog icon)
3. Under Advanced tab – Give CSS classes or IDs so we can control later with CSS

If you’re using  Elementor pro v 2.9 you need to add proper HTML tag to the header that will be in Settings – general settings – HTML Tag to Header

1. Click the Template settings (bottom corner cog icon)
2. This will open Header's settings
3. Under General Settings
4. Choose HTML Tag to header

03

Steps#3 - Sticky header that change background color of header when scroll

In this step, we are going to create a transparent sticky header with Elementor that change the background colour of the site header when users scroll down.

i) Add CSS classes to section

Steps to Follow:

1. Go to section settings by clicking section handle.
2. Go to Advanced tab
3. Advanced
4. CSS classes or ID
5. Give your unique ID or Classes, which ever you prefer.

ii)Use .elementor-sticky--effects class that handle sticky effects to changes the background colour of the site header when users scroll with in-built JS

Steps to Follow:

1. Click the section Handle that is site header
2. Go to Advanced tab
3. Head over to Motion Effects
4. Under that select Sticky and set it to top, this will stick to top
5. And select the Effects Offset to 50px or more, after 50px effects will apply

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

iii) Add Custom CSS to site header's to change the background colour on scroll

Steps to follow –

1. Click the Section Handle (header)
2. Go to Advanced Tab
3. Custom CSS

    
.header--display{
    background: transparent!important;
    padding: 2% 0;
    transition: background .3s ease-in-out,
    padding .3s ease-in-out;
}
    

This CSS rule that is !important will overwrite the site Header's background to transparent. By adding padding of 2 percentage on top and bottom on site header will increase the height of the site header.

You don't want janky weird transition effects so that why by defining transition effects on background and padding instead of all the properties it increases the performance too.

Let change the background colour to white and reduce the padding to 1%. So when users scroll down background colour and padding will change colour and reduce the height of the site header.

    
.elementor-sticky--effects.header--display{
        background: #ffffff;
        padding: 1% 0;
}
    

There are different approach from Elementor official YouTube channel using min-height both will just work fine –

4th and 5th steps are mainly for shrinking logo, change the colour of the navigation menu. If you don't want to achieve these effects, head over to 6th steps to learn more about swap or change logo.

04

Steps#4 - Drag and Drop Site Logo & Nav Menu widget

i) Drag and drop Site logo & Nav menu widget -

Now in this step you need to drag and drop site logo and Nav menu widget into your page structure.

Steps to follow:

1. Drag and Drops - “Site logo ” & “Nav Menu” widget.
2. If you don’t want to add !important on anything do not style anything to your Logo and Nav menu widget.

ii) Add CSS Class to Site Logo –

Steps requirement :

1. Click the Site Logo widget this will open up site logo settings.
2. Now go to Advanced Tab
3. Under Advanced Tab give a unique name under Add CSS classes (site–logo) (See screenshot below)

iii) Add CSS Class to Nav menu widget-

The same step goes to nav menu widget too.

Steps to follow :

1. Click the Nav (navigation) widget
2. Advanced Tab
3. Under Advanced Tab – Add CSS classes (site-–nav)

05

Steps#5 - How to Shrink logo and Navigation Menu in Elementor with CSS

i) For Site Logo Widget

We have added CSS classes to the Site Logo and Site Navigation widget as site--logo and site--nav (it should be double dashed instead of Single dashed) respectively. This will give us more style control to the nav menu and site logo widget.

Steps to Follow-

1. Click the Site logo widget
2. Click the site's logo handle
3. Go to Advanced tab
4. Under advanced tab go to Custom CSS – add the css

    
/*Logo before sticky enable & .site--logo is our CSS Classes*/

.site--logo .elementor-image img{
    width:60%;
    transition:width .3s ease-in-out;
}
    
    

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-image img {
 /*
.elementor-sticky--effects   & .site--logo should be double dashed instead of Single
*/

        width: 55%; /* adjust your width*/
}

if you compare before and after CSS there is change in width of logo, one is 60% before sticky and another one is 55% which is smaller on after sticky effects is applied. This will slightly reduce the width of logo when sticky effects is applied.

ii) For Nav Menu widget

We have to do same thing to our nav menu widget too like site logo but we have to focus more on Color instead.

Steps to Follows :

1. Go to Nav menu widget
2. Click the handle
3. Go to Advanced tab
4. Custom CSS

Before sticky header effects applied

    
.site--nav  .elementor-nav-menu--main .elementor-item{
        color: #000000;
        font-size: 18px;
}
        
    
    

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

.elementor-sticky--effects   .site--nav  .elementor-nav-menu--main .elementor-item{
        color: red;
        font-size: 14px;
}

What we do here is shrink the logo and change the colour of a navigation menu with in-built elementor features.

06

Steps:6 How do I change/swap logo when scroll using Elementor? ( This method is done manually)

If you’re using Hello Theme then there is no way to achieve these effects at all.

I searched a lot on forums, Facebook groups, web, videos but there were no tutorials available at that time after trial and errors I found the solution ( read comments) I need and it works wonder.

There are several ways to do it

1. Inline SVG method for logo
2. Pure HTML and CSS not Elementor site logo ( that what we are doing)

Reminder-

1. We are not going to use Site logo widget.
2. We will use HTML widget and add our own HTML & CSS.

So don’t worry about the CSS i will provide it for you

First Drag and Drop HTML Widget :

Second Add HTML inside "HTML widget" shown on Picture

See the close up look, if you don't want to write HTML all over again Here the link you can copy and paste HTML

Third Add CSS to Change Logo

You need to add class to the logo to switch before applying sticky effects as “before” and “after”.

You still need to adjust properly though

Thank you Breanna Berends for reporting me in time. I change the CSS and now it is working fine. The problem was when I was using position: absolute in my CSS rule, I forgot to add left: 0.

    
.logo--wrapper{
    position: relative;
}



.before, .after{
   -webkit-transition: opacity 300ms ease-in-out;
   -o-transition: opacity 300ms ease-in-out;
   transition: opacity 300ms ease-in-out;  
}

/* Second image opacity is set to 0*/
.after{
    position: absolute;
    left:0;
    opacity: 0;
    pointer-events: none;
   
}

.elementor-sticky--effects .after {
    opacity: 1;
     pointer-events: auto;
}

.elementor-sticky--effects .before{
     opacity:0;
        pointer-events: none;
}
    

See the video below

If you like 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 not able to build your own custom header or hard to understand. You can hire me because i am avaiable

Thank you everyone for pointing me to right direction

Different approach

1. Elementor YouTube Channel
2. Elementor Hide Sticky Header on Scroll Down – Show on Scroll Up Elementor Codes
3. Sticky On Scroll Up (wplovr)