How to style the page navigation

Hi there,

What about something like this?
https://docs.generatepress.com/article/inline-post-navigation/

Let me know if this helps :)

Hi Leo,

yes, thank you, that was helpful.

One more question:

How could I style the nav pagination on the blog page?

Thank you for your great support.

Karsten

Try this:

.page-numbers {
    padding: 4px 6px;
    background-color: #4185f3;
    border-radius: 4px;
    color: #fff !important;
    border: 2px solid #4185f3;
}

.page-numbers:hover,
.page-numbers.current {
    background-color: #fff;
    color: #4185f3 !important;
}

yes, this is very helpful, thank you!

One more question:

I would like like to style the Categories and tags at the end of the blog posts.

Do you have some beautiful code for me which I could use to give Categories and Tag Links more life?

Thank you very much for your great support.

Do you want to keep the Icon beside categories / tags? They make it tricky to style similar to your page navigation.

No, the Icon is not necessary. I would prefer similar styling like the page numbers have...

Try this:

/* Remove icon */
.tags-links:before, .cat-links:before {
    display: none;
}

/* remove comma delimeter - create flex */
.tags-links, .cat-links {
    font-size: 0; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex;
}

/* Format terms */
.tags-links  a, .cat-links a {
    font-size: 12px; 
    display: block;
    margin: 0 0.5em 0.5em 0;
    padding: 4px 6px;
    margin: 0 0.5em 0.5em 0;
    background-color: #4185f3;
    border-radius: 4px;
    color: #fff !important;
    border: 2px solid #4185f3;
}

Thank you very much, David.

Lastly, could you please give me similar code for styling of the page nav links (Forward - Backward)? Currently this are only text links.

Regards,

Karsten

How about this?

#main .post-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
    margin-top: 1em;
}

.post-navigation a {
    display: block;
    font-size: 20px;
    padding: 20px;
    border: 1px solid #4185f3;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    line-height: 2.5ex;
    height: 9ex;
}

.post-navigation a:hover {
    border-color: #666;
}

.post-navigation .next {
    margin-left: 20px;
    display: block;
}

.post-navigation .prev {
    margin-right: 20px;
    display: block;
}

.nav-previous .prev:before,
.nav-next .next:after {
    display: none !important;
}

Very helpful, thank you

You're welcome - glad to be of help

Sorry David, one more issue:

On Mobile view I don't want the styling of Categories and Tags at the end of the article.

Please help with CSS code to fix this issue.

Thank you

Karsten

You can wrap the CSS for the styling inside a media query like so:

@media (min-width: 768px) {
/* Put the CSS styles here */
}

Still using it in 2019 ... very helpful. I made a slight change in the code.

#main .post-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: visible;
    margin-top: 1em;
}

.post-navigation a {
    display: block;
    font-size: 20px;
    padding: 20px;
    border: 1px solid #4185f3;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    line-height: 2.5ex;
    height: 9ex;
}

.post-navigation a:hover {
    border-color: #666;
}

.post-navigation .next {
    margin-left: 20px;
    display: block;
}

.post-navigation .prev {
    margin-right: 20px;
    display: block;
}

.nav-previous .prev:before,
.nav-next .next:after, .next:before {
    display: none !important;
}

Hope its useful.

Best Regards,
Syed H | My Puzzles Blog