[Resolved] How to style the page navigation

[Karsten]

Hello Guys,

could you please advise me how to style the blog and post navigation?

How to increase font size, and center the post navigation, etc.?

Thank you

Karsten

[Leo]

Hi there,

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

Let me know if this helps 🙂

[Karsten]

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

[David]

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

[Karsten]

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.

[David]

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

[Karsten]

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

[David]

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

[Karsten]

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

[David]

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

[Karsten]

Very helpful, thank you

[David]

You’re welcome – glad to be of help

[Karsten]

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

[David]

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

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

[Syed Hussaini]

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

[Author]

Posts