Next Previous Post like Hueman Themes

Hi there,

It looks like they add this into the sidebar. Are you hoping for the same kind of thing? Or do you want it at the bottom of the post?

hi...

Or do you want it at the bottom of the post?

yes, at the bottom of the post...

Give something like this a shot:

.post-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

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

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

.nav-next:before {
    content: "Next Story";
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding-right: 20px;
}

.nav-previous:before {
    content: "Previous Story";
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 20px;
}

yes, it works.

but is it possible to make like this? https://prnt.sc/ktrrno

i mean the next previous post "top & bottom" not "right and left"

thank you

I just made a change, can you try it now?: https://generatepress.com/forums/topic/next-previous-post-like-hueman-themes/#post-676814

after comparing the two code, i prefer the first one...

.post-navigation {
    display: flex;
}

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

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

.nav-next:before {
    content: "Next Story";
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding-right: 20px;
}

.nav-previous:before {
    content: "Previous Story";
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 20px;
}

one problem again, is it correct if i added text-align: left; for .post-navigation .nav-previous ?

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

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

Yep, there shouldn't be any issue with that :)

Hi,

Sorry, reopen this case.

I want to move and remove the arrow/angle symbol, 2 alternative.

1. Alternative #1 Move: i want to move arrow/angle symbol to the Next/Previous Story. Something like this:

Next Story >
Post Title

2. Alternative #2 Remove: i want to completely remove the arrow/angle symbol, just text. Example"

Next Story
Post Title

thanks.

Hi there,

you can remove the > from the post title with this CSS:

.nav-previous .prev:before, .post-navigation .nav-next .next:after {
    display: none;
}

And if you wish you can add the carrat to the content in the CSS you used above ie,:

.nav-next:before {
    content: "Next Story >";
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding-right: 20px;
}

.nav-previous:before {
    content: "< Previous Story";
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 20px;
}

Hi David,

Look like different symbol > and \f105, but no problem it works.

thank you so much, david.

thats great. :) Glad we could help