Hide or Style the Squarespace Store Category Bar

Use these CSS tricks to hide or style the category bar on your Squarespace store pages
Original post:
ajmexperience....
For more CSS code to enhance your website designs, check out the rest of the learn series:
ajmexperience....
Get our free CSS Selector Cheat Sheet:
www.ajmexperie...
Get our full CSS Library:
www.ajmexperie...
------
HERE' THE CSS:
// HIDE CATEGORY BAR //
.products.collection-content-wrapper .nested-category-children {
display: none; }
// STYLE THE TOP CATEGORY BAR //
.products.collection-content-wrapper .nested-category-children {
background: #000000;
color: #ffffff;
border-radius: 8px;
padding: 20px;
font-size: 15px; }
// MAKE THE TOP CATEGORY BAR STICKY //
// Tip! You may need to adjust the top value //
.products.collection-content-wrapper .nested-category-children {
position: -webkit-sticky; position: sticky; top: 120px; z-index: 9999; }
// ADD DROP SHADOW TO TOP CATEGORY BAR //
.products.collection-content-wrapper .nested-category-children {
-webkit-filter: drop-shadow(2px 3px 4px rgb(0, 0, 0));
filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, .3)); }
// UNDERLINE TOP CATEGORY BAR LINKS //
.nested-category-breadcrumb-list-item
{text-decoration: underline solid #00b2bc;}
// STYLE THE SIDE CATEGORY BAR //
.products.collection-content-wrapper .nested-category-tree-wrapper {
background: #000000;
color: #ffffff;
border-radius: 8px;
padding: 20px;
font-size: 15px;
text-align: center; }
// MAKE THE SIDE CATEGORY BAR STICKY //
// Tip! You may need to adjust the top value //
.products.collection-content-wrapper .nested-category-tree-wrapper {
position: -webkit-sticky; position: sticky; top: 120px; z-index: 9999; }
// ADD DROP SHADOW TO SIDE CATEGORY BAR //
.products.collection-content-wrapper .nested-category-tree-wrapper {
-webkit-filter: drop-shadow(2px 3px 4px rgb(0, 0, 0));
filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, .3)); }
// UNDERLINE SIDE CATEGORY BAR LINKS //
.products.collection-content-wrapper .nested-category-tree-wrapper
{text-decoration: underline solid #00b2bc;}
ONLY WANT TO APPLY THIS TO ONE PAGE?
Simply put the section ID in front of each bit of CSS!
Here’s how to target blocks, sections, or pages →
www.ajmexperie...
And here’s how to find block, section, and page IDs →
www.ajmexperie...
------
HERE ARE OUR FAVORITE PLUGINS:
Sync product image with variant
transactions.s...
Show inventory number
transactions.s...
Product image rollover
transactions.s...
Add accordion to product description
www.ghostplugi...
Sale tag announcement bar
www.ghostplugi...
------
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: www.ajmexperie...
☕️ Buy me a coffee: www.buymeacoff...
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
------
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)