Elementor Pro Header Tutorial

This video shows you how you can create custom headers, make them sticky, change the colors and logo when you scroll, and much more.

We will create a Header from scratch with a logo and a navigation menu. We will style the menu in a way that that background of the header will be partly or fully transparent. We will optimize the header for all devices and make it sticky, so when you scroll, the header sticks on the top of the page.

We will add social icons and optimize those for all devices. Then I will show you how to change the background color, link and icon colors, and the logo when you scroll so you will get something like this. I will also show you how to hide the social icons on a mobile.

After that, we will create a top header with social icons and a call to action and style it in a way that it will not stick with the main part of the header. We will also optimize the top header by adjusting the margin and padding pixel by pixel until we think it is perfect!

We will decide on which pages this header should appear, duplicate the complete header and remove the transparency, so we can apply it to the pages that do not need a transparent background.

In the end, I will show you how you can export your beautiful header and import it to another website so you can use it over and over again on your or your clients Elementor Pro websites.

If you already have a header and you want to go directly to the sticky header part, you can do that by going to the timestamps in the description. When you click on the timestamp, you go directly to that part of the tutorial.

Overview With Timestamps
00:00 Intro
00:10 Overview Of The Tutorial
01:42 Get Elementor Pro
02:51 Install and Elementor Pro
03:19 Active Elementor Pro License

The Elementor Pro Header Template
03:40 Create a Header
04:51 Add an Image
05:24 Create a Transparent Background
05:47 Add Editing Handles In Elementor
06:44 Publish Conditions
07:12 Add a Nav Menu
09:28 The Menu Breakpoint
10:24 Optimise The Header for All Devices
12:25 Change the Height Of The Header
14:15 Align the Logo and Menu
14:33 The Elementor Navigator
15:21 Use The Eye To See The Result
16:02 Create a Reference Area
17:10 Use Negative Margins

Make The Header Sticky
18:18 Make The Header Sticky
18:46 Add Social Icons
22:59 Hide Social Icons on a Smartphone
23:36 Style the Hamburger Menu

Change the Logo, Background, and Link Colors
26:10 Change the Link and Icon Colors on Scroll
28:38 Change the Image On Scroll

31:15 Create a Topbar
33:29 Play around with margin and padding

37:32 Create a Duplicate Header With Visible Background
42:53 Elementor Pro Display Conditions
44:45 Export and Import Headers to another website
47:21 Global Colors
48:06 Thank You