[Resolved] Changing Post Navigation Layout

Home Forums Support Changing Post Navigation Layout

This topic contains 7 replies, has 2 voices, and was last updated by  Leo 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1207192

    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 🙂

    #1207635

    Leo Customer Support

    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 🙂

    #1208636

    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.

    #1208694

    Leo Customer Support

    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 🙂

    #1208724

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

    Leo Customer Support

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

    Then add this CSS:

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

    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";
    	}
    }
    #1209805

    Leo Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.