Jump to content

CSS to change order of categories

Recommended Posts

I would like to change the order of the categories on the left handside:

image.png.2ba283768d4ec57cc6dc3481bb366998.png

 

to this:

image.png.f7beaa603199b56bb8df420fce1d36e4.png

 

I am using this code:

.ProductList-filter-list {
  display: flex;
  flex-direction: column;
}

/* All */
.ProductList-filter-list>li:nth-child(1) {
    order: 1;
}
/* New Arrival */
.ProductList-filter-list>li:nth-child(7) {
    order: 2;
}
 

Basically, I just want to move "New Arrival" to the second position and add a little top and bottom padding to the 2nd, and 3rd elements, respectively.  But, this code is moving the "All" element to the second to last position and "New Arrival" is going to the very last position. 

Thank you in advance!

 

 

 

 

 

 

 

Link to comment
  • Replies 2
  • Views 182
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.