Skip to content
All Answers
Blog

How do I style the previous/next post navigation on Squarespace?

Squarespace 7.1 includes previous/next post links via the .BlogItem-pagination class at the bottom of individual posts. These can be restyled into a more prominent navigation element.

Create a full-width split layout with arrows pointing left and right so readers naturally continue to the next article. This reduces bounce rate on blog content.

.BlogItem-pagination {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding: 30px 0;
  margin-top: 40px;
}
.BlogItem-pagination-link {
  text-decoration: none;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.BlogItem-pagination-link:hover {
  color: #666;
}
.BlogItem-pagination-link--prev::before {
  content: "\2190";
}
.BlogItem-pagination-link--next::after {
  content: "\2192";
}
Enhance your blog with our Blog Sidebar toolTry it free →

Related Questions

Blog

How do I add a sidebar to my Squarespace blog?

Blog

How do I change the blog post title size in Squarespace?

Blog

How do I hide the date on blog posts in Squarespace?

Blog

How do I style blog category tags in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →