Create Sticky Pagination Links with Vertical Text on the Sides of Your Squarespace Blog

In this blog post, we'll show you how to create sticky pagination links with vertical text on the right and left sides of your blog. This design is perfect for those who want to add a unique and modern touch to their website's navigation.

Here’s how the code was generated, using chatGPT.

/* Variables */
:root {
    --pagination-width: 50px;
    --link-color: #245959;
    --hover-background-color: rgba(0, 0, 0, 0.1);
}

/* Pagination links */
.collection-type-blog .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    float: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    position: fixed;
}

/* Next and older posts links */
.collection-type-blog .pagination a.next-item, .collection-type-blog .pagination a.older-posts {
    right: 0 !important;
    left: auto !important;
    text-align: center;
    width: var(--pagination-width);
}

/* First child link */
.collection-type-blog .pagination a:first-child {
    left: 0;
    text-align: center;
    width: var(--pagination-width);
}

/* Link colors */
body a, body a:link, body a:visited {
    color: var(--link-color);
}

/* Link hover effect */
.collection-type-blog .pagination a:hover {
    background-color: var(--hover-background-color);
    cursor: pointer;
}

With this CSS code, you can create sticky pagination links with vertical text on the right and left sides of your blog. This unique design adds a modern touch to your website's navigation and enhances the user experience. Simply add the provided CSS code to your website's stylesheet, and you're good to go!

Omari Harebin

Omari Harebin is the founder of SQSPThemes.com, a technical resource and marketing accelerator for Squarespace designers. With 10+ years in the industry almost $2M in digital product sales, he helps designers turn client work into scalable assets and steady income.

https://www.sqspthemes.com
Previous
Previous

Squarespace 7.0 Blog Comments Not Showing Up

Next
Next

How to add a ChatGPT widget to your Squarespace site using MyAskAI