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
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!)
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
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