How To Create a Sticky Header in Elementor

Sticky headers allow a site user to have access to the header and menu portion of the page no matter how far down they scroll. In this article, I will show you how to create an Elementor sticky header using some CSS.

Note: You will need to have Elementor Pro installed to achieve this function.

Create a Sticky Header in Elementor

Go to Templates > Theme Builder > Header and edit your header template.

Right-click the header’s section handle to edit the section. In the panel, go to Advanced > Scrolling Effect.

Once you are in the Scrolling Effect area here are some items you can choose from how you want and customize them how you see fit.

• Sticky: Click Top to choose to stick the header to the top. Other options include Bottom or None.
• Sticky On: Choose which devices to stick the header, including Desktop, Tablet, and Mobile.
• Offset: Set the number of pixels scrolled before the header becomes sticky.
• Effects Offset: Set the number of pixels scrolled before the header effects take place.

Note: The Offset Effects options will only work when Custom CSS is applied.

Now you want to add some Custom CSS. You can add whatever you want if you are familiar with Custom CSS and how it works.

Here is an example of CSS that changes the header’s background color, transparency, and height, with an easing animation effect. You can add this into this CSS field in Elementor for the page you are building.

Remember, you will need Elementor Pro.

Add the following CSS code:

Note: This CSS will take effect when the user has scrolled the number of pixels specified in the Offset options.

There you have it. You have successfully created a sticky header in Elementor. Remember, you can customize it all you want.

The post How To Create a Sticky Header in Elementor appeared first on GreenGeeks.