[Support request] Post navigation css

[Cristina Morbidoni]

Hello. Using GeneratePress premium and Elementor Pro to replicate a site I built with another theme whose author has suddenly stopped updating it… I’ve almost finished to do it but want to improve something in particular as regarding the bottom posts layout.
1) could meta be showed on the same line and how to get bigger and coloured icons?
2) could previous and next posts icons and links be as well showed on the same line and formatted?
See a post before and the same post now
3) navigation in category pages is a little confused, numbers and text are overlayed
Thank you.

[Leo]

Hi there,

1. Try this CSS:

.cat-links, .tags-links {
    display: inline-block;
}
.cat-links:before, .tags-links:before {
    font-size: 20px;
    color: #000;
}

2. Try this: https://generatepress.com/forums/topic/move-post-navigation/#post-410775

3. Not too sure what you mean here. I’m not seeing the overlay:
http://www.screencast.com/t/bqQsk8donrxL

Let me know 🙂

[Cristina Morbidoni]

Hi.
I added your code and:
1) hardly formatted posts navigation in archive pages and this is what I achieved https://ilmetauro.shoppone.it/ilmetauro/category/argomenti/associazioni/page/2/
2) I see meta are on the same line now, but tags icons is stuck to categories names and previous and next post are a little odd. They are not positioned at the really end of post but after social share button and related posts list. Then the right arrow was before right post title and so. Please see this image to see if it’s possible something like this, hope the image is clear.
3) my fault, it’s ok.
Thank you

[Tom]

Hi there,

1. I’m not sure what you mean? Can you explain a bit more?

2. Try adding this CSS:

footer.entry-meta > span {
    margin: 0 20px 20px 0;
}

I also suggest you use this for the next/previous post links instead of the reply Leo pointed out: https://generatepress.com/forums/topic/customizing-previous-next-article-section/#post-598697

Unfortunately it’s not possible to place the footer meta above those items added by plugins. This is because those items have been appended to the post content, while we hook the meta in after the post content.

You would have to disable the automatic output of those plugins, and manually hook them into the hooks after the post meta.

[Cristina Morbidoni]

Hi Tom.

1) Just to let you see what I achieved playing with css. Arrows can be changed with font awesome icons through css?

2) I changed css accordingly to your advices. Here too, arrows are not gorgeous. How to add a font awesome arrow through css? Otherwise it’s better without arrows as they are very bad in particular when title goes to next row, better if above titles is present a text “previous post” and “next post”.

I’ve understood what you mean for placing the footer meta, no matter even if should be much more logical for users.
Thank you

[Tom]

If you have Font Awesome added to your site (https://docs.generatepress.com/article/font-awesome/), we can use their icons. Which arrows do you want to use?

[Cristina Morbidoni]

Hi Tom.
Followed your link for GP and Font Awesome integration. As only needed for these 2 arrows (I like something like Chevron icon) it seems to me that when calling icons from FontAwesome CDN it is a waste of time that slows the site. Am I wrong? So, maybe, the best solution is to add a “previous” and “next” text in the row above the 2 post titles (post navigation), see the same site as it was before or, best of the best…, should be that prev and bext arrow should be completely out of the titles space, so everything should be always well aligned. Thanks

[Tom]

You’re definitely not wrong.

What do you mean by this?:

best of the best…, should be that prev and bext arrow should be completely out of the titles space, so everything should be always well aligned. Thanks

Do you have an example?

[Cristina Morbidoni]

See here, go down, down… just above Related Posts
https://www.thankyourskin.com/best-serum-for-sensitive-skin/
Very simple and clean.

[Tom]

They’re using this CSS:

.single-post .post-navigation {
    font-size: 18px;
}

.nav-previous, .nav-next {
    width: 47%;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#nav-below .nav-previous {
    float: left;
    padding-left: 25px;
    padding-right: 25px;
}

#nav-below .nav-next {
    float: right;
    padding-right: 25px;
    text-align: right;
    padding-left: 25px;
}

#nav-below .prev:before, 
#nav-below .next:after {
    font-size: 28px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 28px;
    color: #DDD;
}

#nav-below .next:after {
    right: 0;
    left: auto;
}

[Cristina Morbidoni]

Yep! That’s it, Tom. Exactly what I need.
Thank you so much.

[Tom]

You’re welcome 🙂

[Author]

Posts