[Resolved] Blog Archive Pager Navigation styling

[Amol Chavan]

How I can style the Blog page archive navigation like this as shown in the image: https://ibb.co/18gQgq0 I need the same as shown the Numbers with round and at the center. Could you please provide the code?

[David]

Hi there,

can you share a link to your site so i can see what you have so far? Then i can look at the required CSS

[Amol Chavan]

Here is the link https://www.growthfunda.com/blog/

[Tom]

Hi there,

Try adding this:

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

.paging-navigation .nav-links>* {
    margin: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: center;
    line-height: 30px;
}

.page-numbers.prev,
.page-numbers.next,
.page-numbers.dots {
    background: none;
    color: initial !important;
    border: 0;
    height: 30px;
    line-height: 30px;
    width: auto;
}

[Amol Chavan]

Tom, Blog Archive Pager Navigation styling is now appearing at the center of the page which is perfect but there is no circle around it. Also, the Previous text is cropping and going down till the footer.
Please ref attached image, this after I have added ur code: https://ibb.co/n8RLBRg and this I’m expecting like this https://ibb.co/18gQgq0

[Tom]

My CSS was in addition to the CSS you were already using to create the circles.

If you re-add that and then add my CSS, it should work.

[Amol Chavan]

Thanks its working.

[Tom]

Glad I could help 🙂

[Amol Chavan]

Tom, I found that my on when I go to blog archive page 2,3, 4….and so on the navigation text “Previous” is showing disturbed. It lagging down and overlapping on the footer and also showing in white color. It should display the same as text: Next → Ref: Image: https://ibb.co/MMqqkX4 and Here is the URL of my blog archive https://www.growthfunda.com/blog/page/2/

[Leo]

Edit this existing CSS:

.page-numbers.next, .page-numbers.dots {
    background: none;
    color: initial !important;
    border: 0;
    height: 30px;
    line-height: 30px;
    width: auto;
}

To this:

.page-numbers.next, .page-numbers.dots, .page-numbers.prev {
    background: none;
    color: initial !important;
    border: 0;
    height: 30px;
    line-height: 30px;
    width: auto;
}

[Amol Chavan]

It looks ok on Desktop but on Mobile, all numbers and text moved in the right direction. Here is how it looks: https://ibb.co/WDB6VHD

[Leo]

Can you clear and disable your caching plugin first so I can inspect the code better?

[Amol Chavan]

I have disabled the caching plugin as requested. Check now.

[David]

Hi there,

there simply isn’t enough room for the label and the arrow on the smaller screens.
You could include this CSS:

@media(max-width: 460px) {
    #nav-below {
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-numbers.next,
    .page-numbers.dots,
    .page-numbers.prev {
        font-size: 0;
        
    }
    .page-numbers.next span,
    .page-numbers.dots span,
    .page-numbers.prev span {
        font-size: 24px;
        padding: 0 8px;
    }
}

On small screens it will remove the Next / Previous Labels and just display the arrows.

[Amol Chavan]

Thanks, issue has been resolved

[Author]

Posts