Skip to Main Content

Free 6 WordPress plugins to create a 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 a transparent sticky Header in WordPress and Elementor for free?

The short answer is no, to access the features you have to upgrade to their pro license.

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

If you have Elementor Pro, you don’t have to buy a premium theme, only the Hello Elementor theme 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 can create sticky header with minimal functionalities in my opinion.
Gumroad: Sticky header template
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 the 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).

Catch Sticky Menu

Catch Sticky Menu Settings

Disadvantage: 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 the 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.

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

Simple Sticky Header on Scroll

Problem: Out of the box, the design is not 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

Elementor – Header, Footer & Blocks by Brainstorm Force

Jet sticky for Elementor by Crocoblock

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.

Header and Footer add new Welcome screen

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.

Elementor's canvas Mode remove header and footer

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

Step#6: Transparent Sticky header with JetSticky plugin

Follow the steps –

  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

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 to the header. 

Sticky Header effects for Elementor options to enable sticky header

Step#2: Enable Sticky Header Effects Settings

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

Sticky header effects settings
  • 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: Enable 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 the specified color
  • If you want border-enabled or disabled.
  • Shrink: if you want to shrink your header and logo enable 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

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

Header Builder for Elementor Add plugins area

Step#2: Find WPDaddy Builder under Templates

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

WPDaddy Header template builder area

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

Improvement :

  1. No Auto detected WordPress logo
  2. Added unnecessary CSS rules like padding, and margin and kept 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
* Make sure there is no overflow of hidden in html and body tag otherwise it wouldn't work
*/
    --position: sticky;    
    position:sticky!important;
    width:100%;
    top:10px;

}
    

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.

Position: sticky CSS property in Can I Use Website

    
/* 
* Make sure there is no overflow of hidden in html and body tag otherwise it wouldn't work
*/

.sticky{
    --position: sticky;        
     position:sticky!important;
    width:100%;
    top:10px;
}
    

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

Picture of Kishorchand wearing Elementor Blue Shirt that I got it from wining Elementor Header competition

Thangjam Kishorchand Singh

Passionate about web performance, I specialize in assisting individuals and businesses in creating high-speed websites to elevate user experience, improve search rankings, and minimize bounce rates. I continually explore cutting-edge tools and techniques to optimize website performance, sharing insights through informative articles, engaging presentations, and valuable content.

Let's connect on my social media channels to engage in discussions about website speed and transform your site into a lightning-fast online experience.

Follow or chat with me -

Contact Me
Scroll up further to Load all the comments...