Custom Post Navigation

Hi there,

Volume uses a Hook element and some CSS - this Gist provides both:

https://gist.github.com/diggeddy/ab33c7505218c583f5f91359f41c05be

Thanks.
I applied it to before comment hook. It works but not as volume. I wish to display it full width.

Hmmm - so where do you want it position above related reviews and full width? If so edit this CSS in the Customizer > Additional CSS:

.wpsp-related-posts.grid-container {
    margin-left: calc( -100vw / 2 + 100% / 2 );
    margin-right: calc( -100vw / 2 + 100% / 2 );
    max-width: 100vw;
}

to look like this:

.wpsp-related-posts.grid-container, #post-nav {
    margin-left: calc( -100vw / 2 + 100% / 2 );
    margin-right: calc( -100vw / 2 + 100% / 2 );
    max-width: 100vw;
}

Edited the css. It shows full width but not in one line. Display one by one.

Try adding this CSS:

@media(min-width: 769px) {
    #post-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

Works great.

Just one query. If the height is bit small, I think it looks more great.

How can I minimize the height?

Edit this CSS:

#post-nav .post-nav-wrap {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 120px;
    height: 100%;
    padding: calc(6% + 1em) 5%;
    -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    -webkit-transition: -webkit-box-shadow 500ms;
    transition: -webkit-box-shadow 500ms;
    transition: box-shadow 500ms;
    transition: box-shadow 500ms, -webkit-box-shadow 500ms;
    position: relative;
}

Remove the height: 100%; property and if need be reduce the min-height: 120px;