Blog

Sticky Navigation Bar On Debut Theme [SOLUTION]

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 -->
Hire Me
Tags: , , ,

This Post Has One Comment

  1. Israel night club April 26, 2022 Reply

    I was excited to discover this website. I want to to thank you for your time for this wonderful read!! I definitely liked every part of it and i also have you book-marked to look at new things on your website.

Leave a Reply