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

Founder of SQSPThemes.com, one of the worlds most trusted Squarespace resources. Since 2015 we’ve helped over 20,000 Squarespace users grow their businesses with custom templates, plugins and integrations.

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