6 Free Plugins To Create Transparent Sticky Header In WordPress And Elementor

  • kishorchand
  • Elementor Page Builder
  • March 22, 2020
  • Join the Conversation
  • Modified 8:14 am

In this Tutorials i will show you how to create transparent sticky header in WordPress and Elementor for free with 3rd parties plugins and recommendations.

Transparent Sticky Header

Is it possible to Create transparent sticky Header effects in WordPress and Elementor with free theme and Free version of Elementor ?

The answer is no,

You cannot do it with Free theme or just free version of Elementor plugins because plugins and themes provider will not provide you features, in order to access the features you need to buy their premium license (pro version) to get all the benefits.

If you don’t want to clutter on all your page i highly recommended using their pro version because It is easy to enable it and causes less conflicts.

If you have Pro version of Elementor, you don’t have to buy premium theme because Elementor pro has the feature and i already cover it on my sticky header with Elementor tutorials

In this Example i am going to use WPAstra theme as an example.

In my opinion you can do it other free theme too but make sure they are compatible with Elementor. If you want to build your header with Elementor .

In this tutorials i am going to show you how to create the header effects in WordPress and Elementor for free using 3rd parties plugins that available on WordPress repository.

In order to achieve the effects in WordPress, please watch the video to learn how to find the CSS selector for your header


01

Catch Sticky Menu

Install Catch Sticky Menu plugin from WordPress Repository or upload it as .zip file and activate the plugin. Then go to Backend and you will find Catch Sticky Menu page on left sidebar – open it , it will prompt you to add selector i.e CSS classes or ID ( See the screenshot below).

Catch Sticky Menu Settings
Catch Sticky Menu Settings
Catch Sticky Menu
Catch Sticky Menu

Problem – No animation on scroll

02

Sticky Menu on Scroll, Sticky Header, Sticky Welcome Bar for Any Theme

Install myStickymenu plugin from WordPress Repository or upload it as .zip file and activate the plugin. Then go to Backend and you will find myStickymenu page – open it – UI is much modern than previous plugin but it has built in animation when scroll.

Sticky Menu on Scroll, Sticky Header, Sticky Welcome Bar for Any Theme
myStickymenu Settings

Problem – It doesn’t have the option to change color of navigation links ( nav menu) when scroll. Which means you have to choose background color accordingly to your theme color you have set up or you have to find way around the style you like.

Sticky Menu on Scroll, Sticky Header, Floating Notification Bar for Any Theme – myStickymenu
Sticky Menu on Scroll, Sticky Header, Floating Notification Bar for Any Theme – myStickymenu

03

Simple Sticky Header on Scroll

After you have install the plugin you need to configure it under Appearance – Customize – you will find settings for Simple Sticky Header on Scroll.

Watch the video below on how to set up

Problem : Out of box, design is not really good you need to add more CSS to style properly.

Simple Sticky Header on Scroll
Simple Sticky Header on Scroll

if you are using free version of Elementor you can achieve Elementor the same effects with just free plugins.

04

With JetSticky For Elementor & Header and Footer Elementor plugins

i)

Install Elementor – Header, Footer & Blocks and JetSticky For Elementor and activate the Plugin

Elementor – Header, Footer & Blocks
Elementor – Header, Footer & Blocks
Jet sticky for elementor
JetSticky For Elementor

ii)

Go to Header Footer Builder

After you activate the plugin – Now you need to hover on Appearance – click the Header Footer Builder and you will welcome with Header and Footer Template blank welcome screen.

If you created template before it will show up otherwise it will be empty.

How to access Header and Footer Builder template

iii)

Click the Add New button

Click the Add new button – Give a Title a name ( For future reference ) here i use “Main Header” as title.

Header and Footer add new Welcome screen

iv)

Choose the option from Header Footer options

  1. First choose the option from Header Footer Options
  2. Type of Template to Header
  3. Set it Display on Rule to Entire Website so the header apply on all the page and post,you can add exclude header from page or post if you have different header.
  4. User Roles – All
  5. Enable Layout for Elementor Canvas Template or you can set the Elementor template as Canvas both are same
  6. Click Edit with Elementor

You will get Blank page or Canvas page – This settings will strip out all theme default features like Header,Footer and sidebar and leave you empty page.

Elementor Canvas Mode
Elementor Canvas Mode

iv)

Find Header, Footer & Blocks

Scroll down you will find header, Footer and Blocks or search it, you will get widgets from Header and Footer Elementor plugin ( see the screenshot below).

Header and Footer Blocks widget

Watch the video on How to create structure,module and settings.

You can find the tutorials on Design Custom Headers & Footers With This Free Elementor Plugin here

v)

Transparent Sticky header with JetSticky plugin

Follow the step –

  1. Set the section background as it is under Section – Background type
  2. Go to Advanced settings – Select Jet Sticky – Enabled Sticky Section
  3. Go to Sticky Section Style – Click Background type – Choose the color you want to appear when scroll.

05

Sticky Header Effects for Elementor and Header and Footer Elementor plugins

Follow JetSticky for Elementor & Header and Footer Elementor plugins tutorials until Find “Header, Footer & Blocks” for setting up Header. and Install the plugin.

i)

Set up custom header

After you have set up custom header with Header and Footer Elementor plugins you will get something like this in Elementor editor.

Enable the settings this will add bunch of features for header .

Sticky Header effects for Elementor

ii)

Enable Sticky Header Effects Settings

After you enabled the settings from there play around with settings.

Sticky header effects for Elementor settings
  • Enable On – if you don’t want to sticky header on Mobile deselect Mobile.
  • Scroll Distance (px) : that the amount of distance to enabled sticky header effects.
  • Transparent Header : Enabled it but make sure you remove background from Header – Style -background otherwise it wouldn’t work.
  • Color : this setting will change background color from default ( transparent or color) to specify color
  • If you want border – enabled or disabled.
  • Shrink : if you want to shrink your header and logo enabled it.

Watch the video learn more

Sticky Header Effects for Elementor
Sticky Header Effects for Elementor

Improvement:

  1. Don’t have option to change navigation color when scroll down.
  2. Replace logo ( More features will added ) on Pro version.
  3. I wish Sticky header also work in Elementor editor too .

If you have pro version of Elementor you can follow my tutorials.

06

Header Builder for Elementor by WPDaddy

I didn’t know the plugin exist 😂 because this is the same approach i use it on my Elementor pro tutorials . You can see the logo part that will be no 7 on Table of Content.

Please Note that I didn’t get any influence or copied from this plugin.

i)

Install and Activate WP Daddy Header Builder plugin

Header Builder For Elementor by WPDaddy

ii)

Find WPDaddy Builder under Templates

After you installed the plugin you need to hover to Templates – Saved Templates

WPDaddy Header template

iii)

Watch the video properly for setting up settings

What you will learn from this video

  1. Create structure of header
  2. Drag and drops Logo ,Menu and search widget respectively.
  3. Enable WPDaddy Header sticky settings , Change logo when scroll, Change background color, Change the color of text.
  4. Save the page

iv)

Watch the video properly to Assign Header

Improvement :

  1. No Auto detect WordPress logo
  2. Added unnecessary CSS rule like padding ,margin and keep overwriting default settings
  3. I wish Sticky header also work in Elementor editor too so we get full experience.
Header Builder for Elementor by WPDaddy
Header Builder for Elementor by WPDaddy

07

With Position : fixed & Position : sticky CSS property (No Plugins)

This is one of the most easiest one to create fixed header without even need of 3rd party plugins but it doesn’t offer all the benefits without JavaScript help.

You need to find the selector of your header and add position:fixed or Position:sticky. Sometime you need to add !important to the selector because your Theme will overwrite your CSS rule.

/* Your theme selector might be different from the demonstration (this is theme only)*/

.main-header-bar{
	position:fixed;
       /* Add width:100% if the design breaks*/ 
	width:100%;
       /* To stick the header to the top of the view port just add top:0; */
	top:0
}
or
/* WPAstra after enabled transparent header*/

.ast-theme-transparent-header #masthead{
       /* You need to overwrite with !important otherwise your theme CSS will overwrite it*/
position:sticky!important;
width:100%;
top:0;

}

If you’re using Header and Footer builder and Elementor plugins to built your header, this is how to do it –

i)

Position : fixed CSS property

As you know when i apply position:fixed to my header, layout shift or squeeze together, it is because the element is removed from the flow of the document.

fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

CSS tricks
.fixed--header{
position:fixed;
width:100%;
top:0
} 

ii)

Position : Sticky CSS property

The sticky value is like a compromise between the relative and fixed values. As of this writing, it is currently an experimental value, meaning it is not part of the official spec and only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

What does it do? Well, it allows you to position an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a fixed value

CSS tricks
Position: sticky

If you don’t add top value to position: sticky , your header will not be sticky and it will not work.

One of the most disadvantage of position : sticky is not widely supported it means you need to keep and eye on it and it is experimental features.

Position : sticky can i use Data
.sticky{
    position: sticky;
    top:0;
}

Problem : you don’t have any control over the header unless if you know JavaScript or if you have pro version of theme then it is possible.

After you set up everything don’t forget to make your site mobile responsive so Google don’t flag your site in Google Search Console and drive you mad. If your site is not Mobile friendly follow my tutorials.

Now the question is for you.

From 6 plugins i tested which one will you use on your projects

Please let me know and if i missed any plugins don’t forget to comments