Elementor Pro Header Tutorial

Video Description

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