To change order of Blog Navigation (PREVIOUS = Next / NEXT = Previous) on Squarespace, you can follow these.
#1. All Blog Pages
To change the order of Blog Navigation (Pagination) on all blog pages
You can use this code to Custom CSS box
body[class*="type-blog"] {
section#itemPagination {
flex-direction: row-reverse;
justify-content: space-between;
}
.item-pagination-link--prev {
margin-right: 0;
flex-direction: row-reverse;
}
.item-pagination-link--prev svg {
transform: rotate(180deg);
}
.item-pagination-link--next {
margin-left: 0 !important;
flex-direction: row-reverse;
}
.item-pagination-link--next svg {
transform: rotate(180deg);
}
.item-pagination-icon.icon.icon--stroke {
padding: 0px !important;
}
.item-pagination-link--next h2 {
text-align: left !important;
}}
Result:
#2. Specific Blog Pages
First, you need to find the Blog Page ID. In my example, it is:
- #collection-6677756d03a4f15ba27ce9d8
Next, you need to change # to dot . symbol, so the new ID will be:
- .collection-6677756d03a4f15ba27ce9d8
Next, use this code to Custom CSS box
/* Pagination Invert */
.collection-6677756d03a4f15ba27ce9d8 {
section#itemPagination {
flex-direction: row-reverse;
justify-content: space-between;
}
.item-pagination-link--prev {
margin-right: 0;
flex-direction: row-reverse;
}
.item-pagination-link--prev svg {
transform: rotate(180deg);
}
.item-pagination-link--next {
margin-left: 0 !important;
flex-direction: row-reverse;
}
.item-pagination-link--next svg {
transform: rotate(180deg);
}
.item-pagination-icon.icon.icon--stroke {
padding: 0px !important;
}
.item-pagination-link--next h2 {
text-align: left !important;
}}