Create a Free Sticky Transparent Header in Elementor

In this tutorial, I’m going to show you how to create a sticky transparent header in Elementor using the Elementor sticky header on scroll effects.

Our header is going to be transparent and on scroll, it’s going to get sticky and change background color.

I’ll also show you how to shrink your logo on scroll or shrink the whole header on scroll and how to make the header appear after a particular percentage scroll.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Free Sticky Transparent Header Tutorial

Step 1: Create A Free Elementor Header

In your WordPress website, under Pages open up your homepage (01:24).

pxIQbt5IxSAytfOUGjjkLmpUZAQN I6MKO1DM0n218ThEm9e61KGbhrNgO2pvJyffPwhilNZToL5IRt412qwWyygJTUytYQWlHZnkykeZ8jv3Re5dr9 5Lo51XXmLCtKUCcqlnM2

When you edit it with Elementor, select your Hero section and go to Style (01:26), under Background Type, give it a gradient background color of your choice.

J0OAOKhr0pIA5v
AJgLC3KOTVzaoieJ eaNw mF EB7X SSYJQS3bsSQdUFNiakM6q9N79 FdBcfjoO47beFN9zS

Next, you need to create the header. 

Since you’re on the free version of Elementor and you’re going to use a plugin called Elementor Header & Footer Builder made by Astra. 

To get this plugin up and running, go to your dashboard and under the Plugins section 

Search for the Elementor Header & Footer Builder then install and activate it. (02:13)

w638qMzZ0yNIlN74CFmHLYJRcXX8lvrZgYSPK K1lyrZi5QhYUFddIzGOlGeGEwyH0MGrwchKr

You’re also going to need another Plugin called Elementor sticky header effects, so back under Plugins, click to add new and search for sticky effects then install and activate it (02:37)6AvjxARLXOb6YjSmn fxaggV9qg lltz2sRP73R0mwmcXdV39pXCgbqm 8pAj6l4le2C1IjeBps3vLUfzd6c7wPVuJt

This plugin will enable you to create and work with a sticky header without having to use any CSS code or to use Elementor Pro to create a sticky header.

After installing and activating, go to your Appearance section and to the header footer builder plugin (03:13).

Q9 9L53igGS2D yqEKpehZ8FJ W5Cpko0f15Valg0NYz9P YCanamuzwKRjgEG8HrjUYb4UWm6OsWNYadkbiE3StTPMf1t9iW0e1f65HTicZl GT wg7wf7zO0yKBNTn6WMyCQB

When it opens up, press the Add New button to create a new header, give it a name, set Type of Template to Header and Display to Entire site, then Publish (03:27), then click the Edit with Elementor button.

A67ZR hSr uHte8poo0vRSZciuzHBOXVlEPzMdoN1rPFH3u9J3sF9ANVfZPQ8N0ON0qgL33rY LAPd0 k9teO3zFiD8JDULC0E8ZBX5kPwMFV PytbebR4KD t4k9l6GRlNL4vBO

In your Elementor editor, add a new 2 column section (03:45), then in the Widgets section drag the Site Title widget to the first column of your section, make sure it is from the Header Footer Builder, that is, that it has HFB on it.

teJkRj706wCTqOclYj6rP IG7 CJhnxAWAYfhGf5tYlfxH79KxDYceNI1GEwNCQVf7LZ1QIZDYqtTnRijPSErRLLsWokfO3xv4ZiJ KqSMildCrh 3qDHBVfyqiO3
yBS09epyMVya4LCQX xlb TyI5ST8mxVn rTDmbVkQcZWYXvstX h9KHxfNdThc022KneovznO742xxoFA h9IhS0CMbN5Lfg5BsAMZfqp1VkPyt7DwzR8Bs

Go back to the Widgets section and search for ‘menu’, find the Navigation Menu widget (with HFB), drag it to your second column (04:30).

c8zJ2BRaUdzcu3 mVTX1SZBylxD6

Select the Menu, go to the Style option in the Edit Navigation Menu area, under Typography set the font size to 20 pixels, under Layout set Column Width to 70%, under Content, go to Alignment and set it to the right side. (05:05)

Select the Site Title column and in the Edit section under Layout, set Column Width to Boxed. 

heasJlqAxZHs0JnNBDWR2NPiqxjXgq3 9uBg6fv3P6Jr0L12VNXxXDk9HvbBUYKof4sX 5Xn6PCjZ1kWLVqcQPYGt8G94KbK wVC9ndpbdLtT8D0tJC4sCM7Cah4f5q88G

Step 2: Give Your Header a Background

Now, we’re going to give the header a background color and increase its height too.

Select the section and in the Edit Section area on the left, go to Style and under Background Type, choose a color. Then go to Advanced, on the Padding option set 1 (EM) for the bottom and 1 (EM) for the top. Click the Update button and preview. (05:55)

9qN71IiCMwaNA2 GTUT6ud6L4AJJe Q4L8WjnMHgDP7bRqkGFVKqnW2qJfAbSAtmUiOqQ1ch a7eG UHU9Q02tXRTkj63Ob4DUGtBWI8CWB9U9C enG0rDPWOXVE20Omzozvntr

Step 3: Make Elementor Header Transparent

To make the header transparent, go back to your Elementor and select your header section, in the Edit section area on the left,  go to Advanced and find the Sticky Header Effects option (06:18)

Also Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus

lNF6bmWDBLYHjlKMuyoKMwRlXIBTLBVGLtQzZWpekdXipw9r9n0Wgbn0R

The sticky header effects option only appears when you have the Elementor Sticky header Effects plugin installed and activated. 

Enable the sticky header effects option, then you’ll be given the options to choose where to enable the sticky header that is, desktop, tablet, and mobile.

Then down on the Scroll Distance option, set it to 200 pixels (06:50), hit update, and then preview your page.

OcdXiSDaA q5m hBrmsg7jJkgsqJJXcDruSxQyVzzBCSbxzT6FOuJUhkpHoYTxtBD VDV7 8oRtoG1KqJU6nM ERnsVpRvMEaaI dnh7qqFAm1NLR1xX h 411Y 9292GhOh6v o

If you don’t want to keep the background on your header, go back to your Edit section, and under Sticky Header Effects enable the Transparent Header option (07:14)

Step 4: Make Elementor Header Sticky and Transparent

To do this, select the header section, go to Style and under Background Type, select color and slide the color picker knob to reduce the color, update and reload the page. (07:48)

Free Sticky Transparent Header in Elementor

You can also reduce or increase the transparency of the color, and you can also change the background color on scroll.

Step 5: Change Elementor Background Color on Scroll

On your sticky transparent header, you can choose to have your background color change to a different color on scroll. To do this:

With your header selected, go to Advanced and under Sticky Header Effects enable Background color and on the ‘color picker’, choose your color (08:37)

To Read: How to reCreate Websites with Elementor based AI Builder – 10Web

l1yJNjguaQgK24Y2ZjqLZFnSlddxelBJugDX9syx4oUUjr3JLdHUL6WHOfR59 nbu2G0JtdXKowkvVCgoXhyA3Ncayqba3Z
hW4WJ6nmt61b7q8EaRBEASq34qrWGNG6BzxLt ur8DQa0X7IcyIRbPBg6PqfBVsOU1HORbARqCSbEsT mCKeGIuBYKaGVc PiQ4JUBo4SkgIm4LCe9

Step 6: Shrink Elementor Header on Scroll

In your Edit Section area, enable the Shrink Header option, then set Header Height to 40 pixels (09:43)

hJxxSw5uGr1OLOEQsRvWR1GVD3p3mDR zUl6FljJ doKYvjFKXSCfdI39 SRQkGo4fdRZL c2tdZi880 MeCvWnbne5M1Cx8DZL44V kw8ue AmD5gQ2niu6vw7 6OyPOaTjeJM

So now you have your transparent header which shrinks and changes background color on scroll.

You also have the option to blur your header; when you go back to your sticky effects, enable the Blur Background option, this means whatever is behind the header becomes blurry while scrolling. 

GvHKtVWLJxe 6kzc 59LIFZ SKUiibAfgEhKYsXmZD84cjIBvdvHQOETZASiVtIchfVEr6qeSrwVZjC5OI RYJdhpoY7ufxHnnbimMKrwSVDnEd aH N6FMDwpcL1jFe4egjsuA

There are a couple of other options in the sticky effects section you can tweak to your liking. For example the option to shrink your logo, change logo color on scroll, or hide the header on scroll.

When you enable the ‘Hide header on scroll down’ option, for example, you can choose how many pixels the header will be hidden on scroll, set it for example to 700 pixels (11:52). So when you scroll down 700 pixels the sticky header will disappear, when you scroll back up it reappears.

Also Read: How to Create a Sticky Transparent Header, Change Logo & Background Color on Scroll in Elementor [PRO]

G7UhnpmAfpOx2jIjqxr zSDYIRp31jSSEI3UV xITUm0A0SloiTYcFTqZoeaxnFMB7BZqSU 8V7rtZCqKDqYHmFLAKpxe6AHHLoIWWL

Elementor Sticky Header Responsive Settings

Under responsive mode (13:14), you can select the tablet or mobile then change the settings for the sticky header to be visible. 

Ni08uqbpgG1gaNJzg DMiixeSR49sdxY2wbwOgOAmgAmjNyG4Og6q3HvyUZA8vAW9zWttzox1G4KodZUbpx wM3INBz

On the mobile device, for example, select the Page title and under Layout set Column Width to 70%, then select the dropdown and set its column width to 30% (13:25), update, and preview.

ifawkKNVU9ZU lLkpYbbCDCED68iOztsmYgdy8JQ OA iyQOAuRbAQFcv26oB 9Xa51iEXgRN515dwDbigYDRS82I6lGsJQCWuPDzRdKZnYyS8mWN kMaq k UdTaHSkHjDyWo3g

Conclusion

That’s how you can make a free sticky transparent header in elementor without adding even a single line of CSS code.

Your header remains sticky and transparent even as you navigate through the different pages on your menu/page.

For any comments or questions, please use the section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *