Archived topic
Numbered Page Navigation
3 replies · Started by Shiraz on July 5, 2020
Viewing posts 1–4 of 4
Hi,
How to create Numbered Page Navigation like this https://prnt.sc/tc31oc. I've added this code in Additional CSS but not getting the result.
.page-numbers {
background: none repeat scroll 0 0 #fff;
font-size: 1.2em;
border: 1px solid #2472ba;
display: inline-block;
padding: 5px 10px;
}
Hi there,
try adding this CSS:
.paging-navigation {
text-align: center;
}
.paging-navigation .page-numbers {
margin: 0 10px;
display: inline-block;
text-align: center;
min-width: 46px;
height: 46px;
line-height: 46px;
border-radius: 4px;
color: #fff;
border: 1px solid #078ade;
background: #078ade;
font-weight: 600;
font-size: 14px;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
}
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
padding: 0 10px;
}
.paging-navigation .page-numbers:hover,
.paging-navigation .page-numbers.current {
background: #fff;
color: #078ade;
}
/* Adjust mobile layout */
@media(max-width: 768px) {
.separate-containers .paging-navigation {
padding: 10px 5px !important;
}
.paging-navigation .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.paging-navigation .page-numbers {
margin: 4px !important;
box-sizing: border-box;
flex: 1 0 12%
}
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
order: 50;
flex: 1 0 40%;
margin-top: 1em;
}
}Thanks a lot for great service :)
You're welcome
This archived topic is closed to new replies.
