[Support request] Custom Post Navigation tweak

Home Forums Support Custom Post Navigation tweak

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #935620
    Patricia

    The custom post navigation is unreadable on my site. I’m using the “volume” site settings and have imported it from the library.

    #935647
    David
    Staff
    Customer Support

    Hi there,

    you’re missing the CSS styling for the custom post nav which is here, the very last rule is what you can change the Next / Previous colors with:

    /* CUSTOM POST NAVIGATION - ENSURE GP NAV IS DISABLED */
    #post-nav a,
    #post-nav .post-nav-wrap {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #post-nav,
    #post-nav .post-nav-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    #post-nav a {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        box-sizing: border-box;
    }
    
    @media (max-width: 768px) {
        #post-nav a {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 100%;
            flex: 1 0 100%;
        }
    }
    
    #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;
    }
    
    #post-nav .post-nav-wrap:hover {
        -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    }
    
    .post-nav-wrap>* {
        color: #fff;
    }
    
    .post-nav-date {
        font-size: 0.9em;
    }
    
    .post-nav-title {
        margin: 5px 0 !important;
    }
    
    .post-nav {
        min-width: 60px;
        position: absolute;
        top: 0;
        border-radius: 0 0 2px 0;
    }
    
    .post-nav:first-child {
        left: 0;
    }
    
    .post-nav:last-child {
        right: 0;
    }
    
    .post-nav {
        background-color: #ff3366;
        color: #fff !important;
        padding: 5px;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.