Venture: Changing the order of portfolio types in Portfolio archive

Project types navigation shown in Portfolio archive are always displayed in alphabetical order. By default, Jetpack does not provide functionality to change the order of project types in Portfolio archive but we can use a custom CSS to set a custom order.

/* Set a custom order of project types */
.portfolio-type-list {
  display: flex;
}

/* Change order of the 1st element in the list (Keep the first element always first) */
.portfolio-type-list > li:nth-child(1) {
  order: 1;
}

/* Change order of the 2nd element in the list */
.portfolio-type-list > li:nth-child(2) {
  order: 3;
}

/* Change order of the 3rd element in the list */
.portfolio-type-list > li:nth-child(3) {
  order: 4;
}

/* Change order of the 4th element in the list */
.portfolio-type-list > li:nth-child(4) {
  order: 5;
}

/* Change order of the 5th element in the list */
.portfolio-type-list > li:nth-child(5) {
  order: 2;
}

In the custom CSS above, you can see a numeric value in several places:

• :nth-child(3) - This is an initial order of the element shown in the Project types navigation.
• order: 4 - This is a new order of that element.