6 Steps On How To Create 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.

Important Note

1. How to Create Sticky Header effects in 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 in scroll?
5. How to switch logo / swap logo when user 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, you can use 3rd parties plugin to create transparent sticky header

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
2. Click the Theme Builder area to
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 vreate New Template
3. Choose Header
4. Properly Give name of the Template for Future reference

02

Steps#2 - Create Transparent Header

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

This will create header structure (mine is two) with 2 columns wrap with section tag ( Default) and please adjust as per your requirement.

1. Create structures (Section) consist of 2 structures or 3 structures
2. Adjust as per your requirement

ii) Set the HTML tag to <header>

Now

1. Click the Section Handle to open its settings.
2. Go to Layout tab
3. Select header as HTML tag ( As per HTML 5 requirement)

My current set up right now :

1. 2 Columns layout
2. Column Position & Vertical Align set to Middle (This will align all the content to middle)
3. Under Style – Background set to None. ( Default is none). See video to learn more

Don’t forget to add classes to the header. So we can style the way we want.

1. Under Section tab (Header tag)
2. Click Advanced (cog icon)
3. Under Advanced tab – CSS classes ( add your own unique CSS classes or id) so we can control later

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

1. Click the gear icon on bottom corner (cog icon)
2. Settings
3. General Settings
4. HTML Tag to header

03

Steps#3 - Change the header background color when scroll

In this step, we need to create a effects in Elementor that change background color when users scroll down.

Steps :

1. Click the section Handle
2. Go to Advanced
3. Motion Effects
4. Sticky – set to top
5. Effects Offset – 50px

i) Change background color on scroll

Steps to follow –

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

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

This CSS will make your Header background to transparent, give padding on top and bottom of 2% respectively and add transition effects for better animation on Padding and background.

Change transparent background to background color with CSS

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

This CSS rule will make your header background color to white and reduce padding to 1% on Top and Bottom of the header. So when you scroll down background color will change and set the reduce padding.

There are different approach from Elementor official YouTube channel using min-height –

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 drops logo and Nav menu widget into yor 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 requirement :

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 already add CSS class 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. Site logo widget
2. Click the logo
3. Advanced tab
4. 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 “Elementor Sticky Effect” is applied.

Logo when Elementor Sticky Effect Applied & .site–logo is our CSS Class (it should be double dashed instead of Single dashed)

.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 handle
2. Advanced tab
3. Custom CSSb

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

06

Steps:6 How do I change logo when scroll ?

Curious right !

Don’t worry the same thing happened to me when someone’s showcase their website and saw the effect. Bad thing is that it is only available on Premium Theme.

If you’re using Hello Theme then there is no way to achieve this effects at all. Because Hello theme is just skeleton theme contain no style, built in features.

How to achieve same effects, there are several ways to do it

1. Inline SVG (It has Performance benefit than using <img> tag and easy to implement but Google Structural data testing might not detect your logo)
2. Manual way by using HTML widget that is available with Free version ( HTML and CSS)

1. We are not going to use Site logo widget for this.
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

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

    
        /* Header is the css class to wrap both logo*/
        /* Updated 20th July 2020*/
.header{
	display: block;
	position:relative;
}
/* Image is the css class for both the Logo (see image above)*/
.image{
	width:20%;
	transition: width 350ms ease-in-out;
}
.elementor-sticky--effects .image{
	width:20%;
}

/* Before is the CSS class for image to be visible before sticky effects is applied (see image above)*/
.before,
.after{
transition: opacity 300ms linear;
}

.before{
	opacity: 1;
	width:20%;
	pointer-events: auto;
}
.elementor-sticky--effects .before{
	opacity: 0;
	width:20%;
	pointer-events: none;
}

/* after is the CSS class for image to be visible when sticky effects is applied (see image above)*/
   /* Updated 20th July 2020*/
.after{
	opacity: 0;
	width:20%;
	pointer-events: none;
	position:absolute;
}

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

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

Reference

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