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

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
Sticky header with Elementor

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:

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

Quick Note -

01

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.

Go to Dashboard - Template - Theme builder

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

Template type

02

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.

Elementor structure
Create structure
Header structure
Header Structure

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)
HTML tag for Header
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)
Header class
Classes for Header tag

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

Page settings for V2.9 HTML tag
Page settings for Elementor pro V2.9 HTML tag

03

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 :

  1. Click the section Handle
  2. Advanced
  3. Motion Effects
  4. Sticky – top
  5. Effects Offset – 50px
Header settings
Header settings

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 –

  1. Click the Section Handle (header)
  2. 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.

Sticky transparent Header with Elementor with color change
Sticky transparent Header with Elementor with color change
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 –

04

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)
Class for Site Logo
Class for Site Logo

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)
Add class to Site navigation
Class for Site Navigation

05

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-
  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.
CSS for site logo widget
CSS for site logo widget
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.
CSS for Site Logo widget
CSS for Site Logo widget

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 :
  1. Go to Nav menu widget handle
  2. Advanced tab
  3. Custom CSS
When sticky effects apply on Navigation Menu
When sticky effects apply on Navigation Menu
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

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

Elementor's HTML widget
Drag and drop HTML widget

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

With Some HTML and CSS present
Add basic HTML to create structure
Close up look at HTML widget
Here the close up Look

CSS for HTML logo switch
CSS for HTML logo switch
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

Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor free tips and tricks that I learned for the last 2 years. I am also a Blogger. I am mostly active on Quora and Facebook. And i love implementing new CSS.

Read More

Powered by Elementor pro

This site is powered by our Favorite Theme builder Elementor pro and it contains Affiliate links,which means that if you buy, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.