- 1) Find the CSS selector
- 2) Catch Sticky Menu
- 3) Sticky Menu on Scroll, Sticky Header, Sticky Welcome Bar for Any Theme
- 4) Simple Sticky Header on Scroll
- 5) JetSticky For Elementor & Header and Footer Elementor plugins
- 5.1) Step:1: Install Elementor – Header, Footer & Blocks, and JetSticky For Elementor and activate the Plugin
- 5.2) Step#2: Go to Header Footer Builder
- 5.3) Step#3: Click the Add New button
- 5.4) Step#4: Choose the option from the Header Footer options
- 5.5) Step#5: Find the Header, Footer & Blocks
- 5.6) Step#6: Transparent Sticky header with JetSticky plugin
- 6) Sticky Header Effects for Elementor By Rwattner
- 7) Header Builder for Elementor by WPDaddy
- 8) CSS Position property
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.
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).
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.
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 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
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.
Click the Add new button – Give a Title a name ( For future reference ) here I use “Main Header” as the title.
- First, choose the option from Header Footer Options
- Type of Template to Header
- 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.
- User Roles – All
- Enable Layout for Elementor Canvas Template or you can set the Elementor template as Canvas both are the same
- 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.
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).
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 –
- Set the section background as it is under Section – Background type
- Go to Advanced settings – Select Jet Sticky – Enabled Sticky Section
- Go to Sticky Section Style – Click Background type – Choose the color you want to appear when scrolling.
Sticky Header Effects for Elementor By Rwattner
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.
After you enable 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: 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
- Don’t have the option to change the navigation color when scrolling down.
- Replace the logo ( More features will be added) on the Pro version.
- 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
- Create the structure of the header
- Drag and drop Logo, Menu, and search widget respectively.
- Enable WPDaddy Header sticky settings, Change the logo when scrolling, Change the background color, and change the color of the text.
- Save the page
- No Auto detected WordPress logo
- Added unnecessary CSS rules like padding, and margin and kept overwriting default settings
- 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)
/* Add width:100% if the design breaks*/
*To stick the header to the top of the view port just add top:0;
* WPAstra after enabled transparent header
*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
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
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 valueCSS 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.
* Make sure there is no overflow of hidden in html and body tag otherwise it wouldn't work
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