Numbered Page Navigation

[Shiraz]

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;
}

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shiraz]

Thanks a lot for great service 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts