How to make header sticky on collection pages in Palo Alto theme?

Store Design
,
1

Hey guys!

I’m using the Palo Alto theme and noticed that the sticky header works on most pages but not on collection pages. Seems like this is just how the theme is designed.

On collection pages, only the filter bar stays sticky but the main navigation scrolls away. I’d love to have the header sticky there too, just like it is on other pages. Ideally it should sit above the filters.

I have the sticky header option turned on in theme settings and it works on home, product pages, etc. Just not collections - I guess that’s the default behavior.

Does anyone know how to modify this so the header stays sticky on collection pages, too?

link: https://chilla.co.il/collections/side-bags

Thanks!

2

Hey @Dignity77!

I totally get your frustration with the Palo Alto theme’s sticky header behavior on collection pages. You’re absolutely right - the theme does include sticky header functionality, but it’s designed to work differently on collection pages where only the filter bar stays sticky.

I’ve got a solution for you that will make your header sticky on collection pages too, positioned right above the filters just like you wanted.

Here’s the CSS code you’ll need to add:

/* Make header sticky on collection pages */
.template-collection .shopify-section-group-header-group {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: white;
}

/* Adjust filter bar to sit below sticky header */
.template-collection .collection-filters {
  position: sticky !important;
  top: var(--header-height, 80px) !important;
  z-index: 90 !important;
}

/* Ensure proper spacing */
.template-collection .collection-filters.is-sticky {
  margin-top: 0 !important;
}

To add this code, you have two options. The first and easier way is to go to Online Store → Themes → Customize, then navigate to Collection pages in the sidebar, scroll down to find the Custom CSS section, paste the code there and save. This method is recommended because it automatically migrates when you update your theme.

Alternatively, you can go to Online Store → Themes → Actions → Edit code, open your assets/theme.css or assets/base.css file, add the CSS code at the bottom, and save.

This code specifically targets collection pages only using .template-collection, so it won’t interfere with other pages where your sticky header already works perfectly. It makes the header section sticky with a high z-index, positions the filter bar below the sticky header, and maintains all your existing filter functionality.

Now here’s the thing - if you’re not comfortable implementing this yourself or just want to save some time, I’d love to help you set this up completely free of charge. Just email me your collaborator code at the email below and I’ll implement this fix in a copy of your live theme. Once you’re satisfied with how everything looks and works, you can publish it. No catch, no sales pitch - just want to help a fellow store owner get their theme working exactly how they want it.

The solution should work perfectly for your Hebrew site and maintain all the existing functionality while giving you that sticky header behavior you’re looking for on collection pages.

Let me know if you have any questions or if you’d like me to handle the implementation for you!

Best regards,
Shubham | hello@untechnickle.com

1 Like
3

Hey @TheUntechnickle,
In order to fix the requested issue regarding the sticky header requires to take a look in your theme file.
Could you please share the 4 digits collab code in the p/m so that I can take a look and fix it for the collection page.
Waiting to hear back from you.
Thanks

4

Hi @Dignity77,

Please go to Actions > Edit code > Assets > theme.dev.js file, find ‘document.querySelector(selectors$E.collectionFilters)’ and change code:

document.querySelector(selectors$E.collectionFilters)

=>

false
5

Hi,

Hope this will help

  • Find the collection.json or collection.liquid file
  • Look for Header Code for {% section ‘header’ %} if it is not there then add it
  • Make the Header Sticky with CSS

CSS example

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
}