Collapse Product Categories & Reorder – Sonora template

Site URL: https://www.seabirdcoffee.com/buy-coffee

Hi all! I'm trying to figure out how to make my categories on my product pages a drop down and I haven't found other code for this. I'm looking to see if there's code to make the categories in the Sonora template a dropdown menu, either hamburger or a sideways carrot dropdown, also possibly with 'Categories' above the dropdown.

Also looking to reorganize the order of the Categories on our coffee page. (possibly doing the same for Merch later down the line.

1. Single Origin, 2. Blends, 3. Light Roast, 4. Medium Roast, 5. Dark Roast, 6. Espresso

https://www.seabirdcoffee.com/buy-coffee 

https://www.seabirdcoffee.com/seabird-swag

Thanks ahead of time!

You can use CSS on both pages to change the order. Using your first example, the code below changes the 2nd item to the 5th place, the third item to the 4th place, and so on, reversing the order. Change the numbers as you like.
 

.ProductList-filter-list {
    display: grid;
}

.ProductList-filter-list li:nth-child(2) {
    order: 5;

}

.ProductList-filter-list li:nth-child(3) {
    order: 4;

}

.ProductList-filter-list li:nth-child(4) {
    order: 3;

}

.ProductList-filter-list li:nth-child(5) {
    order: 2;

}