- This topic has 7 replies, 2 voices, and was last updated 4 years ago by Leo.
-
AuthorPosts
-
March 23, 2020 at 4:34 am #1207192Roi
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/KiUr6Cl3. 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 π
March 23, 2020 at 8:32 am #1207635LeoStaffCustomer SupportHi there,
1. Give this a shot:
https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-7375832. 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-breakpoints3. Any chance you can open a new topic for this one?
Thanks π
March 24, 2020 at 8:41 am #1208636RoiHi,
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:
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.March 24, 2020 at 9:39 am #1208694LeoStaffCustomer Support1. 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 π
March 24, 2020 at 9:56 am #1208724RoiHi 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; } }
March 24, 2020 at 11:15 am #1208797LeoStaffCustomer SupportTry editing the
content: "\f105";
in your CSS tocontent: "\f104";
Then add this CSS:
.nav-previous .prev:before { content: "\f105"; }
March 25, 2020 at 3:49 am #1209327RoiFantastic!
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"; } }
March 25, 2020 at 9:19 am #1209805LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- You must be logged in to reply to this topic.