After we have finished establishing the base of the site we will begin the construction of the header step by step, it’s best to do this to avoid bugs as much as possible. In the guide below we will learn how to set up these templates and how to contain them on our web pages:
The header is the top stripe on the site and presents us with the menu of the site and the official logo for the most part. The header we contain on the site as a template, so that we can display it on all pages of the site without performing any further actions. We’ll go to an area in The Elmentor that builds templates and choose to build a header template.
Inside the image we attached shows an existing menu that we set up ahead of time, and in case the menu does not exist there is an “Add New” button, by clicking it will give us a new page menu. As we have already said, Header has two main libraries that we need to contain – a logo and a menu. We will present the menu with the nav menu library, of course after we have chosen that the section of the header will be divided into 2 columns, while the second column will contain the logo.
It’s important not to forget that we need to make aspect and position adjustments to each of these libraries, after we mark them we’ll move on to select the background color of the top menu by “section” we’ll move to the design area.
As site builders, building header should function as a main navigation on our site access to the pages of the site, and of course an option to return to the homepage at any point we want, so all we have to do is contain our menu on the site. This action will take place as soon as we set the display stipulations, in the header conditioning we will select the entire site, the same goes for the footer.
If we dwell a little on the design theme, I would recommend letting such a light or dark header, one that will be against the color of the hero image or the same color if the menu already fits into the hero image. Another idea is to include the sticky header to produce a navigation menu with maximum user experience. The menu can be made sticky by using a motion effect in Elementor.
To make sure our header has been embedded in the site pages, we will make each page pull the header, so we can be sure that all device types and all browser types are picking up the template we built for the header.
When editing a page in Elementor we will add the header template we saved and designed earlier, and once we click on INSERT the top menu can automatically at the top of the page.
