The header of a website is the first piece of information perceived by visiteurs of your site. It allows you to highlight your brand logo, organize the pages of your site as well as provide other important features (search, connection, etc.). Besides that, having a floating and transparent header is necessary as it improves the user experience.

In this article we will show you how to create a header and make it transparent with Elementor. But before, we will see what a floating and transparent header is.

What is a floating and transparent header?

A floating header is a navigation bar that always remains fixed even when the visitor scrolls down the web page. It is very suitable for sites that have pages with long articles, reviews and one-page sites. And its transparent aspect allows you to see the background color of the page as well as its content.

Why use floating and transparent headers

Modern websites are increasingly using floating and transparent headers because they have a visual impact on the visiteurs of the site. The reasons for adopting them are aimed at:

• Increase awareness of your brand,
• Boost the user experience,
• Improve navigation

Discover more How to create a two-color title in Elementor

Pin and make a header transparent with Elementor

To create a transparent and floating header, you must have both versions ofElementor (Pro and Lite). Otherwise, download the (Elementor, Elementor Pro) before starting.

Once installed, follow the next steps.

Stage 1: create a menu with Elementor

To create a menu, follow these steps:

• select successively Appearance >> Menus
• Name the menu
• Indicate the location of the menu
• Validate by clicking on the button save menu

• Check the pages, articles or posts in the group Add items to the menu
• Click on Add to Menu to add the marked items to the menu
• Finally click on Save the menu

Lire aussi Elementor: How to display text above an image

Step 2: Select Header Template from Elementor Template Library

Users ofElementor Pro have access to a library of ready-to-use templates useful for designing different sections of a Website. You will also find a variety of header templates here. To do this,

• Go successively to Models >> Add

• You will see a modal pop-up
• Select on your mind
• Finally click on Create a template

From then on, the library is displayed. By default, it shows header blocks. Browse through the templates offered, then insert the template that interests you.

The header template will open in the Elementor canvas.

Step 3: Pin header with Elementor

To pin the header, follow these steps:

• Click on the button Edit Header Section
• Then select the tab advanced
• Then Movement effect

• Pull down the menu Pin and select the value A haut, this will freeze your site's header as the visitor scrolls down the pages.
• By default, the header will be pinned automatically on media such as, desktop, tablet and mobile

Also browse Elementor: How to export and import templates

Step 4: Make header transparent with Elementor

To achieve this, repeat the method below:

• Go to style >> background >> color picker

• Then change the opacity of the background

If you want to make the header completely transparent, change the background type by selecting the type loan. Therefore, the navigation menus will be invisible due to the text color contrast (white).

To remedy this situation, do the following:

• Successively click on Modify Menu of browse >> styles
• Then on the color picker
• Choose the desired color (in our case, there was no need to change it).

Once done, you can publish your web page. But before that, let's see how to replace the navigation menus in our template with the ones we created. Remember that the name assigned to our is header menu (see step 1):

• Select the tab contents
• Then modify the menu by selecting the name of your header

And There you go :).

Conclusion

Transparent and floating headers can be useful to you in several cases. We hope this article was able to meet your needs on how to create transparent and floating headers with Elementor. If you have any other concerns regarding this topic, let us know in the comments.