This article is still under construction – the images will be added shortly.
You can create a beautiful, fully responsive and sticky header thanks to Amadeus Elementor.
First, click Templates > Saved Templates of your WordPress dashboard, just below Elementor.
Then, click the Add New button at the top, select Section and name it as you want, for example, Header, and click Create Templates:
///image
Some of the Amadeus Elementor widgets are specially created for a custom header, just type Header in the Elementor search bar to find them.
For my custom header, I will add a logo, navigation on the right, and a page header below my header.
So I create a two columns section in Elementor with a large width for my navigation like below:
///image
As you can see, many settings are available including the Add Sticky setting which allows you to stick your header when scrolling.
Also, you’ve probably noticed, the logo is my website text and not an image, it’s normal. To see your logo in the Logo widget, you need to set it up through your Customiser, it can be in a different location depending of the used theme, I use the free WordPress theme Hello Elementor, and the logo settings is under the Site Identity section.
Once you will add a logo, it will automatically appear in the Logo widget of Amadeus Elementor.
///image
I customize my navigation a little, then I create a new Elementor section of two columns below my header to add the Page Title widget to the left and the Breadcrumb widget to the right.
(NOTE: To hide your page header on the Home page, just click to select your entire page header, then click the Advanced tab and add hide-on-home in the CSS Classes setting)
///image
As you can see in the screenshot above, you can use Amadeus Elementor Breadcrumbs or your preferred SEO plugin.
Now that my header is ready for desktop, I don’t forget responsive, so I resize my screen for tablet and mobile to check if my header looks good on all screens.
Careful, for mobile screens, Elementor put their columns sections 100% by default, you just need to click on the columns of your logo and navigation and add 50% as Column Width to have your logo at the left and navigation at the right on all screens.
///image
Last step, go to your WordPress dashboard, click Amadeus Elementor, then click the Header/Footer tab, select your header in the Header block and click Save Settings.
///image
That’s it! Now you can check your entire site and you will see your beautiful Amadeus Elementor header.
