Post navigation css

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 :)

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

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.

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

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?

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

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?

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

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

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

You're welcome :)