Peter
Step 1: Create A Free Elementor Header
01
In your WordPress website, under Pages open up your homepage When you edit it with Elementor, select your Hero section and go to Style, under Background Type, give it a gradient background color of your choice
Next, you need to create the header. Since you’re on the free version of Elementor and you’re going to use a plugin called Elementor Header & Footer Builder made by Astra. To get this plugin up and running, go to your dashboard and under the Plugins section
Search for the Elementor Header & Footer Builder then install and activate it. You’re also going to need another Plugin called Elementor sticky header effects, so back under Plugins, click to add new and search for sticky effects then install and activate it
This plugin will enable you to create and work with a sticky header without having to use any CSS code or to use Elementor Pro to create a sticky header After installing and activating, go to your Appearance section and to the header footer builder plugin
When it opens up, press the Add New button to create a new header, give it a name, set Type of Template to Header and Display to Entire site, then Publish, then click the Edit with Elementor button.
In your Elementor editor, add a new 2 column section, then in the Widgets section drag the Site Title widget to the first column of your section, make sure it is from the Header Footer Builder, that is, that it has HFB on it.
Go back to the Widgets section and search for ‘menu’, find the Navigation Menu widget (with HFB), drag it to your second column Select the Menu, go to the Style option in the Edit Navigation Menu area, under Typography set the font size to 20 pixels, under Layout set Column Width to 70%, under Content, go to Alignment and set it to the right side.
Select the Site Title column and in the Edit section under Layout, set Column Width to Boxed.
Video: Elementor Free Sticky Transparent Header Tutorial
Check out more on this story on the link below.