[Support request] Custom Post Navgiation Next Previous Post

[Shami]

It’s working. But the numbers in between Next and Previous are not appearing. Also, these buttons are left-aligned. How do I center-align them?

[Elvin]

It’s working. But the numbers in between Next and Previous are not appearing. Also, these buttons are left-aligned. How do I center-align them?

Have you solved this already? Pagination numbers seem to appear on my end as shown in the image below.

Perhaps, you may have to clear browser cache for the changes made to reflect.

To center the paging navigation links, you can try this CSS code.

.paging-navigation{ text-align: center; }

Let us know if it works for you.

[Shami]

Oops. My bad. I checked it in incognito. I guess still there was browser cache issue. They’re working fine now. Thanks.

There is a little room for improvement, though.

When viewed in mobile, the pagination numbers form a stack due to screen size of the mobile (responsive). Then, both rows kind of touch each other, there is hardly any vertical space between them. It’s not a big deal. But I think it’d be better if it looked a little more cleaner. There should be a little space.

Have a look again in mobile, you’ll understand my point.

It happens when I open 2nd or 3rd page. Again, it’s just a minor issue.

[Elvin]

You can expand on the previously added CSS code:

.nav-links > * {
    display: inline-block;
    padding: 5px 10px;
    background: #009b19;
    color: #fff;
    border-radius: 10px;
}

and add margin-bottom:5px; to it so they don’t touch when they stack on mobile.

Maybe into something like this:

.nav-links > * {
    display: inline-block;
    padding: 5px 10px;
    background: #009b19;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 5px;
}

You can change the margin value to fit your preference.

[Shami]

Yeah that bottom margin worked well. You are awesome. Thanks.

[Elvin]

No problem.:)

[Author]

Posts