How to create a sticky header
Creating a sticky header is the same as creating a normal header. The only difference is that it needs a Sticky section in the header template.
1 – Open your header template and select the section you want to make sticky
2 – From the Advanced tab, find the Motion effect and choose the sticky, top, or bottom position.
3 – On the same place, select the devices you want to show the sticky header on, including Desktop, Tablet, or Mobile.
4 – Fill in the offset value and choose the animation of the sticky header. The offset value is the height that the section starts to be sticky.
5 – Save the changes and Publish.
Different sticky header
Create a new section in your header template. It will act as the sticky header.
Then open the Advanced tab and set the Sticky to Top under Motion Effects.
Add the device or breakpoint you want the sticky header to show under the Sticky On field.
Set the Offset to 0, and add the Effects Offset as much as your regular header height is (px). Choose a bigger number if you want the sticky header to show up a while after the user scrolls.
Make sure the Sticky header section is selected, then add the following custom CSS under the Advanced -> Custom CSS:
selector {
display: none;
}
selector.raven-sticky--effects, selector.elementor-sticky--effects {
display: block;
width: 100%;
}
selector.raven-sticky--effects[data-element_type="container"], selector.elementor-sticky--effects[data-element_type="container"] {
display: flex;
width: 100% !important;
}
Once you add the CSS snippet, the selected sticky header will disappear. It’s because, in the CSS, we intentionally hide the sticky section until the user reaches the desired point on the page.
Save your changes and publish the template. You will have a normal header on the website, and once you scroll down sticky header will appear, and the normal header will disappear from the page.
Note: You can still use the Customizer to set a different Sticky Header if you want. In that case, open Jupiter X -> Theme Styles -> Header and choose the Sticky behavior and select your header template.
