How to Create an Elementor Page with Transparent Header

In this article, we will show you how to create the header style the like one below. You need to use the pro version of Elementor to create a header like the one above as you need to add a custom CSS.

The main idea of creating an Elementor page with a transparent header is technically pretty simple. You just need to make the top section of your page to overlap the header.

To do so, you can set the top margin to a negative value, i.e. -90. Follow the steps below to create an Elementor page with a transparent header.

Step 1: Create the Page

First, create a new page (Pages -> Add New) and edit it with Elementor. Or you can also edit an existing page. Before you start editing the page, set the page layout first. Click the gear icon on the bottom-left corner on the left panel. Set the page layout from the dropdown menu on the Page Layout option. Select Elementor Full Width. Make sure to not select Elementor Canvas as this option will disable the header and footer.

Add a new section by clicking the plus button on the canvas area. Once the section is added, go to the Advanced tab. On the Advanced block, click the chain icon to unlink the margin setting and set the top margin to about -90. You can tailor the top margin value until it fully overlaps the header.

Continue your work. Once you are done, publish/update the page.

Step 2: Create the header

On your WordPress dashboard, Go to Templates -> Theme Builder. Click the Header tab and followed by the Add New button to create a new header template.

Give your header template a name and click the CREATE TEMPLATE button to start creating the template. You will be taken to the Elementor editor.

Elementor offers several premade header templates you can choose from. Simply select a header template you like and click the INSERT button to use it. If you want to create the header from scratch, you can simply close the template library. In this example, we use one of the premade templates offered by Elementor.

Edit the section of your header. On the left panel, go to the Style tab and set the background color on the Background block. Set the background opacity all the way down.

Go to the Advanced tab and open the Motion Effects block. Set the Sticky Option to Top. On the Effects Offset option, set to 200. This is the value (in pixels) for the sticky effect to appear after mouse scrolling. You can use a different value to your liking.

Still on the Advanced tab, open the Custom CSS block and paste the following code.

selector.elementor-sticky--effects{
   background-color: #FFF2F5!important
}

selector{
   transition: background-color 1s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
   min-height: 40px;
}

selector > .elementor-container{
   transition: min-height 1s ease !important;
}

To change the color of the background, you can replace the hex code on the background-color line.

Once you are done editing the header, click the arrow button next to the PUBLISH/UPDATE button and select Display Conditions.

On the appearing dialog, set where you want to apply the header. If you want to apply the header to the entire website, simply click the ADD CONDITION button followed by SAVE & CLOSE. To apply the header to a specific page (i.e the page you created on step 1 above), click the ADD CONDITION button and select your preferred page. Click the SAVE & CLOSE button to close the dialog.

That’s it. You have successfully created your transparent header with Elementor.