A floating (sticky) header simplifies site navigation. Technically, this technique is most often implemented using JavaScript code . But a sticky header can also be created using simple CSS rules, which we will look at in this article.
The basic CSS command you will need to create a floating header in your Shopify store looks like this:
position: sticky;
The simplicity of this solution has its negative features:
- You cannot apply animation when a header transitions from a fixed state to a floating state.
- You cannot choose which header blocks should be floating and which should remain fixed. For example, if your theme's header contains a text ad or site navigation, all of these blocks within the overall header will also be floating.
- Browser support for the sticky property not absolute. Most older browsers do not support this property. This means that in these browsers your header will remain fixed, as if you did not apply the "sticky" property to it. At the moment, the property will work for 95% of browser users. You can see the latest information about the "sticky" property support here .
If you have installed one of the free Shopify themes in your store, and the floating header technique is not implemented there, you just need to add the following code to the header.liquid section of your theme (at the beginning or at the end of the file):
<style>
#shopify-section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: white; /* Header background color */
}
</style>
If your store has a custom or paid theme, you should contact the developers or support of your theme. Or just leave a link to your store in the comments so that we can help you find a solution.
Leave a comment