A header is one of the most important parts of your website. It helps a visitor navigate and explore your website easily. In this article we are going to show how you can create a sticky header with Elementor.
Why create a sticky header?
A sticky header makes it handy to navigate to different parts of your website anytime. Often web pages are long and it can be effortful to go to the top of the page to access the header. A sticky header makes it convenient to access any part of your website at all times.
Steps to create Elementor sticky header
- Before creating a sticky header we will need to create a menu. Visit Appearance -> Menus from your admin dashboard.
- Enter the menu name, drag and drop the menu items that you want and under Menu Settings select the Primary Menu checkbox. Once done click on the Save Menu button.
- Now it’s time to create a header. Visit Templates -> Theme Builder of Elementor.
- Select the Header section and click on the Add New button.
- A popup will appear, enter the name for your header in the Name your template field. Click on the CREATE TEMPLATE button.
- You will now be taken to the editor page of Elementor and some header widgets will be available to use under the Elements tab on the left hand side.
- Click on the + icon and select the structure you want to use. We will be using a two column structure for this article.
- Edit the first column that was added and under Layout add the Column Width as 20% for the website’s logo. Select the Site Logo header widget and add your logo to the section.
- In the second column select the Nav Menu header widget and choose the menu we created earlier. Align this column to the right hand side.
- The header template is ready, now it’s time to make the header sticky. Edit the whole header section and click on the Advanced tab and expand the Motion Effects option.
- In the Sticky option select the Top dropdown menu.
- Once done click on the PUBLISH button at the bottom.
- A PUBLISH SETTINGS popup menu will appear. Click on the ADD CONDITION button. Depending on where you want the header to appear you can select different options. We will choose the Entire Site option.
- Click the SAVE & CLOSE button. Your header is now live and sticky.
Having a sticky header can improve the user experience on your website tremendously, especially if the pages on your website are long. You can also add animation effects and designs using Elementor to the header section.