How to Create a Permanent Sticky Header in Shopify Dawn Theme

By default, the Shopify Dawn theme offers a "semi-sticky" header option. This means the header disappears when a user scrolls down the page and reappears only when they scroll back up.

While this is a modern design choice, many store owners prefer a traditional fixed header that remains visible at all times, ensuring navigation is always accessible.

In this tutorial, we will walk through the specific code changes required to turn the Dawn header into a permanent sticky header.

Step 1: Enable the Sticky Header Setting

Before modifying the code, we need to ensure the base functionality is active in the Shopify Customizer.

1. Go to your Shopify Admin and navigate to Online Store > Themes.
2. Click the Customize button on your current theme.
3. Click on the Header section in the left-hand sidebar.
4. Ensure the checkbox for Enable sticky header is checked.

This activates the default semi-sticky behavior, which we will now modify to be permanent.

Step 2: Create a Backup

Since we are editing theme files, it is best practice to create a backup first.

1. Return to the Online Store > Themes page.
2. Click Actions (three dots) next to your theme.
3. Select Duplicate.

This ensures you have a working version to revert to if anything goes wrong.

Step 3: Modify the Header Liquid File

Now, we need to edit the JavaScript logic that controls when the header is hidden.

1. Click Actions > Edit code.
2. In the search bar, type header.
3. Under the Sections folder, open the file named header.liquid.

Locating the Script

We need to find the script responsible for adding the CSS class that hides the header.

1. Press Ctrl + F (or Cmd + F on Mac) inside the file.
2. Search for the specific class: shopify-section-header-hidden.

You are looking for a line within a hide() function (usually around line 575 in older versions of Dawn, though line numbers may vary).

The Code Change

The goal is to stop the theme from adding the "hidden" class while keeping the "sticky" class.

Locate the line that looks similar to this:

this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');

You want to remove shopify-section-header-hidden from this list.

Option A: Delete the class directly Simply delete the class name so the line looks like this:

this.header.classList.add('shopify-section-header-sticky');

Option B: Comment out and replace (Recommended) To keep a record of your changes, you can comment out the original line and add the modified version below it:

// Changed for permanent sticky header
// this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.header.classList.add('shopify-section-header-sticky');

Step 4: Keep Menus Open on Scroll (Optional)

By default, if a user has a dropdown menu open and begins to scroll, Dawn forces the menu to close. If you have a permanently fixed header, you might want the menus to stay open while scrolling.

To achieve this:

1. In the same header.liquid file, look for a function call named this.closeMenuDisclosure() near the code you just edited.
2. Comment out that line.

// this.closeMenuDisclosure();

This prevents the menu from auto-closing when the user scrolls down.

Step 5: Save and Test

1. Click Save in the top right corner.
2. Refresh your live site (ensure you aren't viewing a cached version).
3. Scroll down the page.

The header should now remain firmly fixed to the top of the screen regardless of scroll direction.

Note: This modification is fully compatible with the hover dropdown menu tutorials previously covered for the Dawn theme.