You may have noticed that some websites have their headers “frozen”. We use the term “Sticky Header” to describe such headers. So, when you scroll down, the Sticky Headers will always be in our line of sight. We set sticky headers to make it easy for our audience to navigate to other pages quickly, without having to keep scrolling up and down all the time.
Here’s how to set sticky header using the Elementor Pro Theme Builder for Header Layout.
At the Theme Builder > Header Editor, decide on which part of the header you wish to set as sticky. It may be just the top row, or a few rows, or just one element. If you need only one element to be sticky, then click on that element to edit. If it is a row of elements you need to be sticky, then click on that row to edit. If it’s a few rows, group these rows into a section and edit the section.
Once you have selected which parts you wish to edit to be sticky, go to Advanced at the Editor Sidebar. Scroll down to find “Motion Effects”. Under “Sticky”, select “Top”. You are also given device options to set your selection as sticky, For example you may like this sticky effect to be effective only on Desktop but not on mobile or tablet, and you may set that in by crossing out Mobile and Tablet in the “Sticky On” field.
You may ignore the “Offset” settings in most cases. The Offset numbers mean the amount of space in pixels you want to leave between the top and your sticky selection. So, if you set the offset to 100px, for example, you will see that your header will leave a space of about 100px from the top when you scroll down. If you do not wish to see any space between the top and your sticky selection (which is the usual case), you may simply ignore the Offset settings.
Hope this helps! Have fun! 🙂