Follow below steps to add sticky navigation bar in your debut theme of shopify.
- Go to Theme -> Action -> Layout -> theme.liquid
- Find </head> closing head tag and just above it paste the below code.
<!-- Debut theme sticky header :: start -->
<style>
#shopify-section-header {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 9;
}
</style>
<!-- Debut theme sticky header :: ends --> If you want only on desktop screen and don't want sticky navigation bar in mobile view then add below code.
<!-- Debut theme sticky header :: start -->
<style>
#shopify-section-header {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 9;
}
@media screen and (max-width: 800px) {
#shopify-section-header {
position: unset;
position: unset;
top: unset;
z-index: unset;
}
}
</style>
<!-- Debut theme sticky header :: ends -->