Elementor Guide on How to Make Headers Transparent

Share on facebook
Share on google
Share on twitter
Share on linkedin

Elementor’s Header & Footer plugin came as a breath of fresh air to us. Control over your headers and footers were previously limited, but with this feature, you can mould them to your exact liking.

While the plugin lets you do a lot, some features are a little harder to set up. Namely, making your headers transparent or making them change color while scrolling can get a bit tricky.

If you’ve had problems creating these visuals for your pages, this article is just what you need. This will be a step-by-step manual on how to pull off these features.

Note: this advice will also work on mobile!

  • How to Make Headers Transparent

Headers can be made transparent in just a couple of easy steps. So let’s get started!

Step 1: create a header the same way you usually do — don’t forget that it needs to be sticky.

Step 2: don’t choose the background for the part where the header is (setting the rgba to 255,255,255,0 or 0,0,0,0 can also be used to set the background to transparent).

Step 3: make the Z-index (alpha) value a little higher (let’s say 3). This will slightly increase opacity (if the first three values of your rgba is 255,255,255, this might make the background slightly lighter, if it’s 0,0,0 — it’ll be darker).

Step 4: publish the header as you normally would.

Step 5: put a negative margin on the page section where the header stands (-100px or less ought to do the trick) so the header can overlap the background.

By now you should have ended up with something similar to the image below.

Elementor Headres Transparent
As you can see, the header is clearly see-through.

However, leaving the header like this may present a problem for someone scrolling down. When the page text and visuals roll under it, it looks messy, and reading like this gets difficult.

So we need to have the header change colors when you scroll. Here’s a quick rundown on how to do this.

  • How to Change Header Color while Scrolling

Step 1: in the header template, add a section above the header — no gap, no margins, no padding. This will enable the header to become transparent again when you scroll back to the top of the page.

Change Header Color

Step 2: put a +1px margin on your header section, so that there’s no white gap above the header. Your margin settings should look like this:

Element Customize
Step 3: for this one we need to get some CSS work done. Go to the Advanced tab and select Custom CSS. Then type in the following code:

.elementor-sticky--active {
background-color: rgba(0, 0, 0, 0.70);
}

Doing so makes the sticky header change color as you go through a given page.
Now, the Advanced tab ought to be filled out like so:

Custome CSS

At this point, you have a fully functioning, transparent header with changing colors. But why stop here? While the setup you’ve got now certainly is nice, a little bit more work could give it a much more professional style, and it wouldn’t cost you any load time since 47% of people expect websites to load in 2 seconds or less.

We can still make it look more sleek with the help of some cool effects.

  • Take it a Step Further

This section will be dedicated to adding the following features:

Reduce header height when scrolling down so everything behind it is easy to see;
Make said size change snap-free for a nicer look.

Size Changing Header

To pull this off, we’ll have to do some CSS customization again. In the Image Advanced tab for the header, add a CSS class or ID and give it a name, something like this:

custom class

Here the class is called “logo.”

Next, you’ll need to add the following lines of code in the header’s Custom CSS in the Advanced tab (instead of “logo” just use whatever name you gave to the class mentioned a moment ago):

.logo img {
width: auto;
max-height: 80px;
}

This sets the limits for the size changes.

.elementor-sticky--active .logo img {
max-height: 60px;
width: auto;
}

This determines the header elements’ size when on top of the page.

.elementor-sticky--active.elementor-row,.elementor-sticky--active.elementor-row a {
max-height: 70px;
}

This controls the header size while scrolling.

You can tweak these given values to what suits you. After this, your header should change size according to where you are on a page.

Smooth Header Size Change

Finally, we can give the header a satisfying animation as it changes sizes. Here’s how we do that.

All you have to do is add this code to the Custom CSS:

selector {
transition: all 0.5s ease;
}

This sets the transition rate (this sets the rate to 0.5 seconds, but see which value works best for you).

.elementor-sticky--active .elementor-row, .elementor-sticky--active .elementor-row a {
max-height: 70px;
transition: all 0.5s ease;
}

This switches from the transparent header to the colored one.

.logo img {
width: auto;
max-height: 80px;
transition: all 0.5s ease;
}
.elementor-sticky--active .logo img {
max-height: 60px;
width: auto;
transition: all 0.5s ease;
}

This removes the snap.

Finally, we’ve created a smooth looking, transparent header that changes color when not on the top of the page.

If you are not tech savvy and looking to get some tech help for your website, contact us here.

About

Leave a Comment

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