6 Steps On How To Create Sticky Header with Elementor without 3rd parties plugins

kishorchand
November 6, 2018
33 Comments
Elementor Page Builder
9:50 am

How to Create transparent Sticky Header with Elementor that changes background color and Logo when scroll down without any 3rd party plugins or add-on

Table of Contents

1 What you will learn from this post:
- 1.1 Quick Note -
2 Create Elementor Header Template
- 2.1 i) Dashboard - Templates (hover) - Theme Builder
- 2.2 ii) Add New - Select the type of template ( Choose Header) - Give a name ( Future reference) -Create Template
3 Create Header with Transparent Background
- 3.1 i) Select structure (add as per your requirement and align properly)
- 3.2 ii) Set the HTML tag to < header>
4 Create Sticky header with Elementor that change background color on scroll
- 4.1 i) Change background color on scroll
5 Drag and Drop Site Logo & Nav Menu widget
6 Shrink logo and Nav menu widget with CSS
- 6.1 i) For Site Logo Widget
- 6.2 ii) For Nav Menu widget
7 How to Change "Logo" when you scroll down ?

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 transparent sticky header without using any extra JavaScript just use what Elementor is provided on Elementor pro.

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: Custom CSS feature .

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.

What you will learn from this post:

How to Create Sticky Header effects in Elementor.
How to Create Transparent Sticky header in Elementor.
How to shrink header on scroll with Elementor pro.
How to change background color when scroll down.
How to switch logo / swap logo when user scroll down.
How to change color of navigation color when scroll down

Quick Note -

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.
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.
There is No Browser prefix in this tutorials,you can get it from here for free Browser prefix.
If you don’t have pro version, you can use 3rd parties plugin to create transparent sticky header.

Create Elementor Header Template

i) Dashboard - Templates (hover) - Theme Builder

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

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

Create Header with Transparent Background

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.

ii) Set the HTML tag to < header>

Now

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

My current set up are :

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

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

Under Section tab (Header tag)
Click Advanced (cog icon)
Under Advanced tab – CSS classes ( add your own unique classes or id)

If you’re using Elementor pro v 2.9 you need to add proper HTML tag under page Settings – General Settings – HTML Tag to Header

Create Sticky header with Elementor that change background color on scroll

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

Steps :

Click the section Handle
Advanced
Motion Effects
Sticky – top
Effects Offset – 50px

You can still watch the official video which is done by Min height but mine are different using padding on top and bottom.

i) Change background color on scroll

Steps to follow –

Click the Section Handle (header)
Advanced Tab
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. So when you scroll down background color will change and set the reduce padding. Different approach from Elementor official YouTube channel –

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:

Drag and Drops “Site logo ” & “Nav Menu” widget.
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 :

Click the Site Logo widget this will open up site logo settings.
Now go to Advanced Tab
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 :

Click the Nav (navigation) widget
Advanced Tab
Under Advanced Tab – Add CSS classes (site–nav)

Shrink logo and Nav menu widget with CSS

i) For Site Logo Widget

We already add CSS class to the Site Logo and Site Navigation as

site--logo and site--nav

respectively. This will give us more style control to the nav menu and site logo widget.

Steps-

Site logo widget
Click the logo
Advanced tab
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

.elementor-sticky--effects   .site--logo   .elementor-image img {
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 :

Go to Nav menu widget handle
Advanced tab
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;
}

How to Change "Logo" when you scroll down ?

Curious right ! Don’t worry the same thing happened to us when someone’s showcase their website and saw the effect. Bad thing is that it is only available for Premium Theme. If you’re using Hello Theme then there is not possible at all. Because Hello theme is just skeleton theme contain no style Then how to achieve same effects, there are several ways to do it

Inline SVG ( Performance benefit and easy to play around but Google Structural data testing might not detect the logo)
Manual way by HTML widget ( HTML and CSS)

Thing to consider –

We are not going to use Site logo for this.
We will use HTML widget instead with plain HTML and CSS no JS required.

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

i) Drag and Drop HTML Widget

ii) Add HTML inside "HTML widget" shown on Picture

iii) 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

/* Header is the css class to wrap both logo*/
.header{
display: block;
}
/* 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{
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)*/
.after{
opacity: 0;
width:20%;
pointer-events: none;
}

.elementor-sticky--effects .after{
opacity: 1;
width:20%;
transform: translateX(-50px)/* Play around with numbers*/;
pointer-events: auto;
}

Result

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

Unable to build your own custom header or hard to understand. You can hire me

^$20
one time

Complete header except mega menu

Reference