Show filtered category name

Site URL: https://isabmonaco.com/shop-1

Site URL: https://isabmonaco.com/shop-1/homediffuser

Hi everyone,

I need help with the filter categories in my website, I use  Squarespace 7.1, business account. 

 1 ) In the shop section I would like to have always have the filter categories  sticked  on the right when I scroll.
Same thing on the mobile but sticked on top or on the right. (maybe adding a background the header?) (screenshot attached)

2) I would like to have the category filter path at the top of the product. On the desktop it shows only the product name and on the mobile the same.
 

Has anyone figured out a way to do this?

Many thanks,
Claudia

Hi,

What is access password?

Hi @tuanphan i've made the website public now 

Hi @tuanphan I've used this code for the desktop and it's working. How could I have the same result on mobile? 

// Product Cagetory Sidebar Style //

.products.collection-content-wrapper .nested-category-tree-wrapper {
  background: #F3F4F2;
  border: 0px solid #F3F4F2;
  border-radius: 00px;
  padding: 30px;
  text-align: left;
  font-size: 18px;
}

#1. Sticky: I see you fixed?

#2. Add to Design > Custom CSS

/* Show category Link (ver 3) */
@media screen and (max-width:767px) {
	h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper {
    display: flex;
    float: none !important;
    max-width: unset !important;
    min-width: unset !important;
    width: 100% !important;
    padding-left: 0 !important;
}
h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}
    h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
	.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
		padding-top: 6px;
	}
}

Hi @tuanphan thank you!

Just two things: how can I reduce the height of the gray bar that contains the filters and remove that space between the bar and the header?

10 hours ago, claudiafrat said:

 

Hi @tuanphan thank you!

Just two things: how can I reduce the height of the gray bar that contains the filters and remove that space between the bar and the header?

Remove this space?

Hi @tuanphan Yes! remove those spaces highlighted in red

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.nested-category-tree-wrapper {
    padding-top: 0px !important;
    padding-bottom: 5px !important;
}
}

thank you @tuanphan