Sticky Navigation Bar On Debut Theme [SOLUTION]

  • March 12, 2022
  • ramzan
  • 1 min read

Follow below steps to add sticky navigation bar in your debut theme of shopify.

  1. Go to Theme -> Action -> Layout -> theme.liquid
  2. 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 -->