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

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 with 6 free plugins

Is it possible to Create transparent sticky Header effects in WordPress and Elementor?

The short answer is no and you cannot get the features for Free on themes or free version of Elementor plugins because plugins and themes developers will not provide you for free, in order to access it you need to buy their premium license (pro version) to get all the benefits.

If you don’t want to clutter all your page with a bunch of plugins, I highly recommended using their pro version because It is easy to enable it and causes fewer conflicts.

If you have the Pro version of Elementor, you don’t have to buy a premium theme, only the Hello Elementor is enough because Elementor Pro has the feature built-in to create sticky elements with limited functionalities and that is why I wrote an in-depth article on how to create a sticky header with Elementor or you can buy it from Gumroad.

Sticky header with elementor with pro version

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

In my opinion you can do it with any free theme too but make sure they are compatible with Elementor.

In this tutorial, I am going to show you how to create the header effects in WordPress and Elementor for free using 3rd parties plugins that are available on the 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

#1. Catch Sticky Menu

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

Download the plugin from WordPress Repository
Catch Sticky Menu Settings

Missing features there is no animation on scroll

#2. Sticky Menu on Scroll, Sticky Header, Sticky Welcome Bar for Any Theme

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

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

Problem – It doesn’t have the option to change the color of navigation links ( nav menu) when scroll. This means you have to choose the background color properly to improve the contrast ratio.

#3. Simple Sticky Header on Scroll

After you have installed 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

Simple Sticky Header on Scroll

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

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

#4. 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
Jet sticky 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 be welcome with Header and Footer Template blank welcome screen.

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

Header and Footer Builder

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 the 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 applies on all the page and post, you can add exclude the header from page or post if you have a different header.
  4. User Roles – All
  5. Enable Layout for Elementor Canvas Template or you can set the Elementor template as Canvas both are the same
  6. Click Edit with Elementor

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

Elementor's canvas Mode

iv)

Find Header, Footer & Blocks

Scroll down you will find the 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.

#5. Sticky Header Effects for Elementor and Header and Footer Elementor plugins

Sticky header effects for Elementor by Rwattner

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 a custom header with Header and Footer Elementor plugins you will get something like this in Elementor editor.

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

Sticky Header effects for Elementor

ii)

Enable Sticky Header Effects Settings

After you enabled the settings there are a bunch of features that will drop down shown in picture below.

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 the 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

Improvement:

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

If you have the pro version of Elementor you can follow my in-depth article.

#6. Header Builder for Elementor by WPDaddy

Header Footer Builder By WPDaddy

I didn’t know the plugin exist 😂 because this is the same approach I use on my Elementor pro tutorials. You can see the logo part that will be no 7 on the 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

ii)

Find WPDaddy Builder under Templates

After you installed the plugin you need to hover to Templates – Saved Templates- WPDaddy Header

WPDaddy Header template

iii)

Watch the video properly for setting up settings

What you will learn from this video

  1. Create the structure of the 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 the 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 the full experience.

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

This is one of the easiest ones to create a fixed header without even the need of 3rd party plugins.

You need to find the selector of your header and add a position: fixed or sticky respectively. Sometimes 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 build your header, this is how to do it –

i)

Position : fixed CSS property

As you know when I apply for a position: fixed 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 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

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 disadvantages of position: sticky is not widely supported it means you need to keep an eye on it and it is experimental features.

Position : sticky CSS property, can I use Data
.sticky{
    position: sticky;
    top:0;
}

Problem: you don’t have any control over the header unless if you know JavaScript.

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

Now the question is for you.

From the 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