BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How to Make a Transparent Header with Elementor

You are currently viewing How to Make a Transparent Header with Elementor

A transparent header will not have a background color, so you’ll be able to see the section behind it.

You can easily create your website header with the theme builder feature of Elementor pro.

In this article, you’ll learn how to make a transparent header with Elementor.

What is a Transparent Header

The transparent header is the section at the top of the page and has a very light or no background color.

The transparent header is on top of the other sections and will show the section’s content behind it. It’s a relatively new style that can be seen on many websites.

Transparent header example

Make a Transparent Header with Elementor

Creating the transparent header is an easy process that you can do by changing the section’s settings and some simple CSS rules.

All we have to do is remove the header’s background and then push the section behind it to the top of the page.

Step #1: remove the header’s background

In the first step of the process, we need to remove any background color that the header may have.

Therefore, click on the header’s section, switch to the Style tab, and remove the header’s background color.

Remove background color from header

Step #2: increase the Z-index

The z-index is a way to prioritize the layer’s order. The elements with the higher z-index value will be displayed on top of the lower-valued ones.

To ensure the header will be on top of the section behind it, we will need to give the title a sizeable z-index value.

While editing the header, move over to the advanced tab and increase the z-index property to 10.

Increase header's z-index

Step #3: add custom CSS

In this last step, we will add the custom CSS rules to make the header float on top of the other sections.

Basically, we’re asking the browser’s engine to position the content at the top of the page behind the header.

Under the advanced tab, expand the custom CSS option and paste this code:

selector {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

After pasting the code, publish the template and revisit one of your website’s pages to view the changes.

See-through background-color

Another option is to paint the header with a light opacity background color to match your brand’s colors.

Instead of removing the background (step #1), choose the desired color but lower the opacity.

See-through background color

The section behind the header will be visible thanks to the low transparency number.

Step #4: Add top padding (optional)

Sometimes, the elements of the header will hide essential parts of the section behind it. Thus, we should fix it by increasing the padding number of the back section.

Open Elementor for the page that holding the hidden section and click on the top section.

Navigate to the advanced tab and increase the top padding to match your style needs. Adding padding will keep the section at the top of the page and push the content downward from the inside.

Add top padding to hero section

Last, save the changes and revisit the page to view it live.

Level Up Your Transparent Header: Sticky, Resize, and Special Effects

Making a transparent header is a design upgrade. In this section, I would like to show you how to take it further and improve it.

Elementor widget libraries

Sticky header

A sticky header will always stick to the top even while scrolling up or down the page. This is a handy feature because it will keep the site’s links accessible at any time.

Combining both methods enables us to create any header design we can dream of.

Make sure also to read our article on how to create a sticky header with Elementor to learn more about the subject.

Sticky header example

Adding sticky effects to the header can improve your website visitors user’s experience. Therefore, I recommend you do it.

First, expand the motion effects tab and change the sticky option to the top.

It’s best practice to give the header a background color when scrolling to make the links visible on white background sections.

Then, set the effects to offset number to define how many pixels add the background color. I entered 100, meaning that the new background color will fire after scrolling 100px from the top.

Sticky Header

A CSS class elementor-sticky--effects will be added to the header section when reaching the effects offset number above. Add the CSS rules below to apply to the new class.

Expend the custom CSS tab and enter these rules:

.elementor-sticky--effects {
   background-color: #66c0ff82;
    transition: 0.5s ease;
}

A light blue background will be added to the sticky header when reaching the set scrolling point.

Background color with low opacity

If you want to change the color to a different one, replace #66c0ff82 with your desired color’s code.

You can read our how-to change link’s color in the WordPress article to learn how to get the color code.

Shrinking header

Another cool trick that often can be seen with many websites is the shrinking header when scrolling down.

The tallest element inside of it usually determines the height of the header.

Many times, the logo’s height is the one that sets the header’s height, while in other times, it’s the padding of the menu’s links.

The CSS below will tackle both options.

Resize the logo

Paste the code below inside the custom CSS tab of the header’s section to reduce the logo size to 50%:

.elementor-sticky--effects .logo img {
width: 50% !important;
}

Save the changes and test your website. If the logo size sets the section’s height, that should address it. However, if the link’s paddings are setting the height, delete it, and keep on reading.

Remove menu’s links padding

If the header’s height is affected by the menus’ links padding, decreasing or removing the paddings should resize the header.

The CSS below will do the trick:

.elementor-sticky--effects a {
    padding: 0!important;
}

If non of the codes worked for you and the header’s height stayed the same, switch back to the content tab and change the size to default.

Set header's height to default

Finally, save all changes and test your website once again.

Conclusion

In this article, you’ve learned how to make a transparent header with Elementor.

Leave us a comment below and let us know if you need further help on the subject.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply