Sticky Breadcrumbs and Collection Toolbar in Prestige

Store Design
, ,

Topic summary

A user updated their Prestige theme and encountered issues with sticky elements on collection pages. Two main problems emerged:

Primary Issues:

  • Collection toolbar no longer sticks after the theme update (worked in previous version)
  • Breadcrumb navigation needs to be sticky and positioned directly under the header

Desired Stacking Order:

  1. Announcement Bar (app)
  2. Header
  3. Breadcrumb
  4. Collection Toolbar

Partial Solution Provided:
Another user shared CSS code to make breadcrumbs sticky using position: -webkit-sticky; position: fixed; z-index: 9999999;

New Problems After CSS Implementation:

  • Desktop: Gap appears between header and breadcrumbs on product pages
  • Mobile/Tablet: Product photos scroll under breadcrumbs, cutting off the top portion
  • Custom category pages (not actual collections) don’t maintain sticky behavior

Status: The discussion remains open with the sticky breadcrumb partially working but causing layout issues across different page types and devices.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

I just downloaded the newest update of the Prestige theme and am having some problems I don’t know how to fix. The theme is unpublished at the moment but here is an example of the currently published theme.

piercingya.com/collections/titanium-body-jewelry

As you can see in the currently published theme, the collection toolbar sticks. It does not do that in the updated unpublished theme even though it is checkmarked in the theme customization editor. I do not know how to fix this.

I would also like to make the breadcrumb bar directly under the header sticky also and not sure how. I would like the order to be:

Announcement Bar (which is an app)

Header

Breadcrumb

Collection Toolbar

Can anyone help with this coding? Thanks in advance for any help.

2

@Purpletitanium add below css to make breadcrumb sticky

nav.category-breadcrumbs {
    position: -webkit-sticky;
    position: fixed !important;
    z-index: 9999999;
}
3

Thank you so much! this works perfect on my collection pages but there is a space between the bottom of the header and the top of the breadcrumbs on the product pages on desktop. On mobile and tablet it works but the top of my product photos scrolld up under the breadcrumb and cuts the top of the product photos.

And then I do have actual pages that are not part of the collection pages for example “types of jewelry/captive-bead-rings” just as an example. The types of jewelry page is not actually considered a collection but a page that I made to show all the collections in the category of types of jewelry. I hope this make sense but that one just scrolls up too and doesn’t stick. I appreciate this help.