[Resolved] Changing Post Navigation Layout

[Roi]

Hello,
Since I’m dealing with an RTL language, I need to change the layout of the in-post navigation.
Also, facing an issue with the placement of the Read More button.

1. Desktop – Prev/Next blog post – how can we make it like this? https://imgur.com/a/Xg0MyFS
2. Mobile – Prev/Next blog post – it looks good the way it is, just the top one needs to be Next, and bottom previous. https://imgur.com/a/KiUr6Cl

3. Read More button – it’s set to 24 words. On some posts the button is aligned perfectly with the image. On others, it isn’t. How can we force it to be aligned with the image? https://imgur.com/a/UHGo88j

Thanks 🙂

[Leo]

Hi there,

1. Give this a shot:
https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-737583

2. Try wrapping the CSS in step one in @media (min-width: 769px) { so it’s desktop only:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

3. Any chance you can open a new topic for this one?

Thanks 🙂

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

[Roi]

Hi,

1. It didn’t work. I don’t want it to say Next/Previous, rather display the title – only for the right link to be for the previous post, and the left one for the next post, as in this example:

View post on imgur.com

It’s also important for the arrows to be aligned as they’re seen in the image.

2. In mobile view only, all I need is to replace the arrows so it looks like in the “new layout” example: https://imgur.com/a/5Xaov6L

Thanks!
Appreciate the patience and thorough help.

[Leo]

1. Ahh in your screenshot it says prev and next so I thought that’s what you wanted. In that case this should help:
https://docs.generatepress.com/article/inline-post-navigation/

2. Let’s take care of #1 first.

Let me know 🙂

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

[Roi]

Hi Leo,

1. I got it to the following state, now we only need to replace the arrow direction.

Also, kindly take a look at the CSS if you find any syntax/order problems. I tweaked it a little…

/* In-Post Navigation Dekstop */ 
@media (min-width: 769px) { .post-navigation {
    display: flex;
}

.post-navigation .nav-next {
    width: 50%;
    text-align: left;
}

.post-navigation .nav-previous {
    width: 50%;
}

.post-navigation .nav-next .next:before {
    display: none;
}

.post-navigation .nav-next .next:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f105";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
}
}

[Leo]

Try editing the content: "\f105"; in your CSS to content: "\f104";

Then add this CSS:

.nav-previous .prev:before {
    content: "\f105";
}

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

[Roi]

Fantastic!
Thanks. You have a great support.

This is the complete CSS for replacing the next/previous post in Desktop, as well as in mobile:

/* In-Post Navigation Dekstop */ 
@media (min-width: 769px) { .post-navigation {
    display: flex;
}

.post-navigation .nav-next {
    width: 50%;
    text-align: left;
}

.post-navigation .nav-previous {
    width: 50%;
}

.post-navigation .nav-next .next:before {
    display: none;
}

.post-navigation .nav-next .next:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-right: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f104";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
}

	.nav-previous .prev:before {
    content: "\f105";
}
}

/* In-Post Navigation Mobile */ 
@media (max-width: 768px) {	.nav-previous .prev:before {
    content: "\f105";
}

	.post-navigation .nav-next .next:before {
	content: "\f104";
	}
}

[Leo]

No problem 🙂

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

[Author]

Posts