[Resolved] Pagination Display Error

[Author]

Posts

[CharlesB2907]

There is an error in the pagination on this page. The 1st page link and what appears to be active page indicator floating to the far right of the pagination group.

How can this be corrected?

[Waqar]

Hi Charles,

Thank you for contacting us and I'll be happy to assist.

I've checked the pagination links and noticed that some of the custom CSS code included on the website is making the current list item, show floated to the extreme right.

You can add some additional custom CSS code to override that and make all pagination list items show inline, correctly:

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container {
    display: block;
}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container li {
    display: inline-block;
    overflow: hidden;
    text-align: left;
}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container li a {
    float: none;
    padding: 6px 8px;
}

.wpv-pagination-nav-links-container.js-wpv-pagination-nav-links-container li span {
    float: none;
    padding: 6px 6px;
}

Note:

1. The above code can be included in the view's "CSS editor" tab if you'd like to use this for a single view.

2. To use this for all views, you can alternatively include it globally through WP Admin -> Appearance -> Customize

regards,
Waqar

[CharlesB2907]

Waqar,

It work. Thank you for providing that solution.

This are two other display issues. When I added the CSS, from a sample, for the hover-over background color it also automatically changed the hover-over background color status in my top navigation which I did not want. When I attempted to add CSS for a border around the pagination numbers, it also placed a border around the links in the header nav menu. Is there a way to prevent this from happening?

I also added CSS to set an active link background color but it doesn't show.

[Waqar]

Hi Charles,

Thanks for the update and glad the code works.

I've noticed that you had a separate ticket opened for the current pagination link's background color and I've just replied it. I'm sure that code will also help. You're welcome to follow up on that same thread, to avoid any clutter of confusion.

To limit the effect of custom CSS code that we add, we can make it more "specific" so that it doesn't apply to all elements on the page and only applies to those items that we desire.

This can be achieved by introducing a wrapping or containing element in the code. For example, you'll note that in the CSS code that I suggested above, I didn't directly used "li" but used classes "wpv-pagination-nav-links-container" & "js-wpv-pagination-nav-links-container" which are wrapping elements for the pagination. It translates to "don't target any li but only the ones which fall within the specified classes".

You can read more about the CSS code "specificity" at:
hidden link
hidden link

Note: As the original question from this thread is now resolved, I'll request to mark this thread as resolved and follow up on different topics/questions on their respective threads.

regards,
Waqar

[CharlesB2907]

Hi Waqar,

Thank you for this information and I sincerely appreciate your help.

[CharlesB2907]

My issue is resolved now. Thank you!