Sticky Product Category Top Bar + Styles

---

Description

Keep the product category top bar in place when scrolling. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Sticky Product Cagetory Top Bar //

.products.collection-content-wrapper .nested-category-children {
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
  z-index: 9999;
}

// Product Cagetory Top Bar Style //

.products.collection-content-wrapper .nested-category-children {
  background: #F25F5C;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 20px;
  font-size: 15px;
}

---

Customize

Within the sticky code, adjust the top px value to increase or decrease the amount of space above the product category top bar when scrolling.

To style the category top bar adjust the background, color, border, border radius, padding, and font size values to your liking.

The category top bar can be enabled in the product page settings.

---