fbpx

Elementor Pro Header Tutorial

Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on pinterest
Pin

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top