Free 6 WordPress plugins to create a transparent sticky header in WordPress & Elementor

Is it possible to Create a transparent sticky Header in WordPress and Elementor for free?

The short answer is no, to access the features most of the plugins or theme developers will upsell you with their pro upgrade.

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

On the other hand, If you have Elementor Pro, you don’t have to buy a premium theme, only the Hello Elementor is enough because Elementor Pro has Theme Builder capabilities which can do the same thing as premium themes provide & one of the built-in functionalities is able to create sticky effects with very limited functionalities in my opinion.

If you want, you can buy the template from Gumroad.

In this example, I am going to use the WP Astra 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 sticky header in WordPress and Elementor for free using 3rd parties plugins that are available on the WordPress repository.

To achieve the effects in WordPress, watch the video to learn how to find the CSS selector of your header

Find the CSS selector

Catch Sticky Menu

Install the 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, and it will prompt you to add selectors i.e CSS classes or ID ( See the screenshot below).

Missing features there is no animation on the scroll

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

Install the 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 more modern than the previous plugin but it has built-in animation when scrolling.

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

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 it up.

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

JetSticky For Elementor & Header and Footer Elementor plugins

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

Step#2: 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 the Header and Footer Template blank welcome screen.

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

Step#3: 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.

Step#4: Choose the option from the 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 pages and posts, you can add or exclude the header from a 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.

Step#5: Find the Header, Footer & Blocks

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

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

Step#6: 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 scrolling.

Sticky Header Effects for Elementor By Rwattner

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

Step#1: Set up a custom header

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

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

Step#2: Enable Sticky Header Effects Settings

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

• Enable On – if you don’t want to sticky header on Mobile deselect Mobile.
• Scroll Distance (px): the amount of distance to enable 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 the 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 to learn more

Improvement:

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

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

Header Builder for Elementor 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 6 on the Table of Content.

Please note that I didn’t get any influence or copy from this plugin.

Step#1: Install and Activate the WP Daddy Header Builder plugin

Step#2: Find WPDaddy Builder under Templates

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

Step#3: Watch the video properly for setting up the settings

What you will learn from this video

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

Step#4: Watch the video properly to Assign the Header

Improvement :

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

CSS Position property

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 –

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
} 

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 means you need to keep an eye on it and it is experimental features.

.sticky{
    position: sticky;
    top:0;
}

Problem: you don’t have any control over the header unless 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

Reference

1. Learn how to create the Elementor sticky header without using any 3rd parties add-ons.