[Support request] Custom Post Navigation

Home Forums Support [Support request] Custom Post Navigation

Home Forums Support Custom Post Navigation

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

    Hello

    I want to display Custom Post Navigation like “Volume”

    Screenshot- https://prnt.sc/oo5who

    #975485
    David
    Staff
    Customer Support

    Hi there,

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

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

    #975499
    John

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

    #975517
    David
    Staff
    Customer Support

    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;
    }
    #975522
    John

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

    #975530
    David
    Staff
    Customer Support

    Try adding this CSS:

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

    Works great.

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

    How can I minimize the height?

    #975583
    David
    Staff
    Customer Support

    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;

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.