- This topic has 3 replies, 3 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
November 30, 2020 at 4:25 pm #1559448Baz
I’m styling the pagination numbers to make them more larger with a coloured background. However, once the screen gets below 400px, the numbers start overlapping rather than stacking. Please see https://ibb.co/9sJgz2P
I tried using the CSS below, which didn’t work. I don’t want to activate the Spacing module just for this 🙂
@media only screen and (max-width: 400px) { #nav-below .page-numbers.next, #nav-below .page-numbers.prev { display: inline-block; margin: 10px 0; } }
Maybe it needs to be flexbox CSS?
Also, how do I change, or get rid of the arrows before/after ‘Previous’ & ‘Next’
Thanks.
November 30, 2020 at 8:47 pm #1559665ElvinStaffCustomer SupportHi,
Also, how do I change, or get rid of the arrows before/after ‘Previous’ & ‘Next’
You can modify the post navigation markup using the
generate_post_navigation_args
filter.Example:
add_filter( 'generate_post_navigation_args', function( $args ) { if ( is_single() ) { $args['previous_format'] = '<div class="nav-previous"><span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>'; $args['next_format'] = '<div class="nav-next"><span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>'; } return $args; } );
This completely removes the arrow icons.
As for the layout on mobile, its hard to tell why it overlaps that way w/o being able to inspect the site. If you’re working on a local site, any chance you can put up a live staging/dev site so we could check? Thank you.
December 1, 2020 at 1:31 am #1559943BazHi Alvin,
I’m using a local host setup for site development.
The filter you provided to modify the post navigation markup has no effect?
With regards to the styling issue, I’m just adding the following CSS to the child theme (no other plugins except GP Premium with Blog and Menu activated).
I have also set the theme to use Icon Type: Font.
.paging-navigation .page-numbers { border-radius: 3px; padding: 10px 20px; } .paging-navigation .nav-links .current { background-color: #0066cc; color: #fff; } .paging-navigation .nav-links>* { background-color: #333; color: #fff; } .paging-navigation .nav-links>*:hover { background-color: #0066cc; color: #fff; } .paging-navigation { text-align: center; }
@media only screen and (max-width: 400px) { #nav-below .page-numbers.next, #nav-below .page-numbers.prev { display: inline-block; margin: 10px 0; } }
Thank you.
December 1, 2020 at 6:44 am #1560353DavidStaffCustomer SupportHi there,
see the CSS method i provided here:
https://generatepress.com/forums/topic/numbered-page-navigation/#post-1352543
It’s responsive, on smaller screens the next / prev buttons will form their own row below the pagination.
-
AuthorPosts
- You must be logged in to reply to this topic.