How can I create a fixed side menu with collapsible links on my collection page?

[CstarC]

Hello everyone, I have a few things to fix on my collection page.

1. I would like to make my side menu (https://www-chiarastellacattana-com.myshopify.com/collections/collection with collapsible product pages. So they should appear only once you click on their related cathegory (TABLE LINENS, BLANKET & THROWS, BATH TOWELS…).

2. I need then to keep the side menu always fixed at the same place once you scroll down for checking the products.

3. Finally I have to raise the products grid. I tried already but probably it’s in conflict with other values…

Thank you very much for your kind help!

[oscprofessional]

@CstarC
Hello,

#shopify-section-template--16402069717227__banner {
	width: 20%;
	float: left;
}
#shopify-section-template--16402069717227__product-grid {
	overflow: hidden;
	width: 80%;
}
.collection-hero.color-background-1.gradient {
	width: 100%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Like This

[CstarC]

Hello and thank you again for your help.

To better center the product grid, I’ve changed to this;

#shopify-section-template–16402069717227__banner {
width: 10%;
float: left;
}
#shopify-section-template–16402069717227__product-grid {
overflow: hidden;
width: 90%;
}
.collection-hero.color-background-1.gradient {
width: 100%;
}

BUT now the side menu seems narrowed, as you can see, categories like TABLE LINENS, wraps with LINENS…

Also what I needed, was to have the subcategories as example Placemats, Runners.. (highlighted in red), visible only once you click on their category (as example TABLE LINENS).

This means, as soon as you enetr the COLLECTION page, you only see on the side menu the main categories highlighted in yellow.

Hope I’ve explained it better now, thanks!