Site logo

Archived topic

Custom Post Navigation tweak

1 reply · Started by Patricia on June 20, 2019

Viewing posts 1–2 of 2

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

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;
}
This archived topic is closed to new replies.