Debut Theme: sticky navigation bar tutorial

Regardless of your business strategy one thing every theme should give you is freedom. Freedom to A/B test whatever does or does not work for you.

Debut theme, while being an amazing theme, lacks a few essential features, like a sticky navigation bar. In this tutorial I’ll teach you how to quickly install it.

Downloading the files

Download the files clicking here. (live preview)

Complete details with all included features can be found here.

Updating the header file

  1. In your Shopify admin, go to Online Store > Themes Actions Edit Code.
  2. Open the header.txt file that you downloaded and copy all the code in there.
  3. Now go back to your Shopify admin, find the header.liquid file in your theme.
  4. Delete everything in there and paste the code that you copied.
  5. Save. Make sure the first line says “Sticky Debut Header” like this:

    Liquid code for Shopify

Fixing the page jumping bug

If you’re on mobile and click on “search” or the button to expand the menu you may notice that the page will jump up. There is a very easy simple way to fix this:

  1. In your Shopify admin, go to Online Store > Themes Actions Edit Code.
  2. Find the file theme.js.
  3. Press CTRL +F (or command + F on Mac) and search for (0, 0)
  4. Delete this line. Here is how it looks like before and after:


Now you’re ready to use your Sticky navigation bar. Happy sales!

Shop

Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.Background with geometric patterns.

In need of a Shopify developer?

Feel free to reach out, we'll work together to find a custom solution that attend your needs.

Request a free quote

Contact Us

Contact us to learn more about how we can help grow your business. No strings attached.

Send us an e-mail and we'll get back to you within 24 hours! Before you click on "send message" please make sure to do the ReCaptcha so your e-mail can be sent safely. 🙂

Loading...