Creating a Transparent Header with Elementor

On some pages we might want to create a Transparent Header.

A transparent Header is the type of header that blends in with the first element on the page. This is useful for pages that are using a Hero section as the first element. Such an example can be seen here:

• Services Classic
• About Us Minimal
• Contact Minimal

To create a Transparent Header, first navigate to your WordPress admin dashboard -> Creativo Elements -> Headers.

Edit one of the existing headers. If there are currently no headers created, follow this tutorial to create your first header.

To set the current header as Transparent, navigate to Settings -> Header Settings.

Set the Transparent Header to Yes.

Hit the Update button. Next refresh the header editor page.

The Transparent Header is now active.

Once the user will scroll down the page, the initial state of the Header will be displayed in a nice transition effect.

There is however something we have to change.

Because of the Transparent Header option, we might have to set a specific Logo as well as a Color for the Menu, when the Transparent Header is active – this is needed because if the Logo has dark colors and the Navigation Menu is also using a dark color, these elements will not visible on a dark background image.

First, let’s select the Logo element by clicking on it.

Under Transparent Header Logo, upload a different Logo if needed. In our case, we will set a White Logo which is the exact dimension as the Default Logo. Same thing for the Retina.

For the Navigation Menu, select the element and go to the Style tab.

Expand the Transparent Header section.

Here we can set the Transparent Header Link Color and Transparent Header Active Pointer to the colors we want.

Let’s set Transparent Header Link Color option to: #FFFFFF

The Transparent Header Active Pointer option can be left without a color or we can specify one, like a green color or any other accent color. This will set the exact menu item to the color we set, only if we are on the exact page that is linked to the menu item.

This will make the Navigation Menu become white only when the Transparent Header is used.

When scrolling down the default colors for the Navigation Menu will be used.