[Resolved] Style the Post Navigation Like This

[Willya]

Hi,

I want to make the previous button on the far left side and next on the far right side, while the navigation number stays in the middle. Is this possible to do?

I have shared a screenshot to make it easier for you to understand what I mean.

Thank you

[Fernando]

Hi Willya,

Can you share the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/?s=private+information

[Willya]

Sorry, I forgot to share the link. I’ve add the link to private information form.

[Fernando]

Try adding this CSS:

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
}

a.prev.page-numbers {
    margin-right:auto;
}

a.next.page-numbers {
    margin-left:auto;
}

[Willya]

Thank you. It works!

Ah, one more question. Can we add space/padding between the numbers of pagination?

[Fernando]

You’re welcome!

You can try this:

a.page-numbers {
    padding: 0 10px !important;
}

[Willya]

Thank you Fernando. You are the best!

[Fernando]

You’re welcome Willya!

[Author]

Posts