Search for a plugin or theme

How to Make a Transparent Header with Elementor

How to Make a Transparent Header with Elementor

Elementor headers can easily be made using the header’s and footer’s theme builder feature of the plugin.

In a previous article, I showed you how to create a sticky header with Elementor. This time, you’ll learn how to make a transparent header with Elementor.

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

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 showing the content of the section behind it. It’s a relatively new style that can be seen on many websites.

Transparent header example

How to Make a Transparent Header with Elementor

Creating the transparent header is an easy steps process that can be done by changing the section’s settings combine with some simple CSS rules.

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.

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 – change the Z-index

While still editing the header, move over to the advanced tab and increase the z-index property to 10. The z-index is a way to rank layers and a large number is necessary to make sure the header will be the front one.

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 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 important parts of the section behind it. We can 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 but will push the content downward from the inside.

Add top padding to hero section

Save the changes and revisit the page to view it live.

Sticky, Resize, and Special Effects

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

Elementor widget libraries

Sticky header

A sticky header will always be displayed at the top even while scrolling up or down the page. This is an extremely useful feature because it will keep the site’s links accessible at any time.

Sticky header example

Adding sticky effects to the header can improve your website visitors user’s experience.

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

Set the effects offset number to define after how many pixels to add the background color. I entered 100 meaning that the new background color will be added 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 would like 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 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 height of the header is usually been determine by the tallest element inside of it.

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. If the height is set by the paddings of the links, 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 height 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 the importance of a transparent header and how to achieve it 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