Archived topic
Changing Post Navigation Layout
7 replies · Started by Roi on March 23, 2020
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 :-)
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 :)
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:
https://imgur.com/O5f1Lgb
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.
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 :)
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;
}
}Try editing the content: "\f105"; in your CSS to content: "\f104";
Then add this CSS:
.nav-previous .prev:before {
content: "\f105";
}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";
}
}No problem :)
