Elementor Pro Header Tutorial
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 optimise 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 optimise 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. Also here we will optimise the topheader 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.
Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on pinterest
Pin
Related: Learn more about WordPress
2020-11-16 20:40:00
Ferdy,
I’ve loved your tutorials and have learned a lot from you. Thanks for that.
HOWEVER, I’ve had a REAL pain with Elementor and Astra. I’ve paid to go pro with both but nothing seems to work. Tried making changes to one of the Astra themes – nothing updated. Now I can’t even load the “Edit with Elementor” function.
I’m not a techy but not totally ignorant either. I created a site with Divi that worked well.
Mostly this is feedback to you. Not finding a way to communicate to you apart from leaving a comment here.
Best wishes for you in 2021. Hope you and yours are safe and healthy. Any help you can be is greatly appreciated.
– jacque
2020-12-06 08:36:41
Geachte Ferdy,
heb je ook video’s waar in je uitlegt hoe je een privacyverklaring op je website plaats
Afzal
https://youtu.be/1JS9wFvYUag?si=7aPpZgkYtlseCoq8
I m watching this video today, i m sure its too late , but where is header template..?
I m not able to find it…
2020-12-06 21:17:56
The sticky header CSS works great for me for the menu.
The text goes to white and the background to black.
But for the drop down menu: the text goes to white – but the background stays white – so my text disappears!
What CSS code do I need to set the background of the dropdown menu to black please???
(I have set the dropdown background to grey as a work-around – but I don’t like it!)
Mindy
Ferdy – I’m trying to create my header template, but instead of it using the menu names I had already set up in the back end, it is only showing “Item #1, Item #2, etc.” I’m afraid if I type the menu names in manually (your menu in this demonstration showed up automatically), they won’t link to the pages.
What am I doing wrong?
Ferdy
Hi Mindy! This is a common Elementor thing – the Nav Menu widget shows ‘Item #1, Item #2’ as placeholders in the editor. To fix it: click the Nav Menu widget → find the ‘Menu’ dropdown in the left panel → select your menu. The live site will show your actual menu items correctly. Hope that helps! ????
Ryan
Hi Ferdy,
I notice that you don’t reply to these comments so I hope that you reply to this one. I successfully created the header. Your videos have come in clutch. Thank you.
However, i would like to now finish the footer section and don’t see any videos on this. Can you please advise?
Nova Bot
Hi Ryan! Congrats on getting the header working! ???? For the footer it’s the same process in Elementor Pro: go to Templates → Theme Builder → Footer → Add New. Build it just like the header. You can also check the Elementor Pro playlist on my YouTube channel for more. Good luck!
Ferdy
Hi Ryan! Congrats on getting the header working! ???? For the footer it’s the same process in Elementor Pro: Templates → Theme Builder → Footer → Add New. Build it just like the header. Check the Elementor Pro playlist on my YouTube channel for more. Good luck!
Ferdy
Hi Ryan! Congrats on getting the header working! ???? For the footer it’s the same process in Elementor Pro: Templates → Theme Builder → Footer → Add New. Build it just like the header. Check my Elementor Pro playlist on YouTube for more. Good luck!
Ferdy
Hi Liz! To add your logo in Elementor: use the ‘Site Logo’ widget (found in the widget panel). Drag it into your header template in Theme Builder. Make sure you’ve set your site logo under Appearance → Customize → Site Identity first. Then it’ll show up automatically! ????
Ferdy
Hi Sandra! Yes, you can change your header color in Elementor Pro’s Theme Builder. Click on the header section → Style tab → Background. Choose a solid color or gradient. If you want it to change on scroll, you can use the ‘Sticky’ feature under Advanced → Motion Effects and set a different background for the sticky state. Hope that helps! ????
Ferdy
Hi Chira! You can add a mega menu in Elementor Pro by going to Elementor → Menus from the dashboard, or by using the Nav Menu widget and clicking ‘Edit’ next to the menu item. Check out my Elementor Pro tutorial on YouTube for a step-by-step walkthrough! ????