How to Create a Fixed/Sticky Header on Shopify Debut Theme

Although the Debut theme on the Shopify theme store is excellent for starter entrepreneurs who want to get into the Shopify game. There are limitations of functionality within the theme which can cause UX issues to your customers.

One basic and very UX friendly functionality is having the header always fixed at the top of the screen, no matter where your customer scrolls down the page. This will ensure your customers will have easy access to your navigation at all times!

Let’s get down to business.

Add Code in Theme.css

Go to the Shopify theme edit code. Head over to the Assets folder and click theme.css. At the very bottom, paste the below code.

#PageContainer {
    padding-top: 0 !important;
}

#shopify-section-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    padding-top: calc(0px + 0px);
    z-index: 100;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    -ms-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    -o-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
}

#SearchDrawer {
    z-index: 101;
    height: 100px !important;
}

.announcement-bar {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
}

.search-bar {
    position: fixed;
    top: 0;
    z-index: 102;
}

Delete Code in Theme.js

In the same Assets folder and click theme.js, within the file search for the below code and delete the line.

window.scrollTo(0, 0);

Viola! you now have a sticky/fixed header on your Debut theme.