[Resolved] Turn next and previous post links to theme buttons?

[James]

Hey guys,

I am using the latest GP premium and the the Read theme, I am wanting the next post and previous post text links to be buttons. Please can somebody assist me?

Thanks

[Augustine]

Hi, To turn next and previous post links to buttons go to your Theme Customizer >> Layout >> Blog.

Should incase you’re still having issues do let me know and i’ll be happy to assist.

[James]

Hey,

Thanks for the fast reply, however that just changes the read more option to a button. I’m looking to change the post navigation text links seen in this screenshot below.

https://imgur.com/a/plOTxbD

Thanks

[David]

Hi there,

do you have an example of the style you want to achieve ?

[James]

I was thinking something that just stands out more like in the screen below.

https://imgur.com/a/ikds5xd

Not overly fussy on the end result, just think the current text links are very blended in. I’d be happy to use the theme buttons style, but I dont know how to convert the text link to a button link, so appreciate any help provided! 🙂

Thank you!

[David]

Try this CSS:

#nav-below {
    margin-top: 10px;
}

.nav-previous,
.nav-next {
    position: relative;
    margin-top: 10px;
}
#nav-below .nav-previous a,
#nav-below .nav-next a {
    display: block;
    padding: 20px 40px;
    background-color: #ff0000;
    color: #fff;
}
#nav-below .nav-previous a:hover,
#nav-below .nav-next a:hover {
    background-color: #565656;
}
.nav-previous .gp-icon,
.nav-next .gp-icon {
    position: absolute;
    top: calc(50% - 15px);
    left: 10px;
    font-size: 20px;
    color: #fff;
}
.nav-next .gp-icon {
    left: unset;
    right: 0;
}
@media(min-width: 600px) {
    #nav-below {
        display: flex;
        justify-content: space-between;      
    }
    .nav-previous,
    .nav-next {
        max-width: calc(50% - 10px);
    }
}

Let us know. May want to change its behaviour for mobiles.

[James]

That is perfect! Thank you very much! 🙂

Just one final thing, you are correct it needs its behavior changing on mobile. At the moment, they are side by side on mobile and the text looks like a long vertical list of words haha. Can we stack them vertically on mobile at all?

Thank you

[David]

Updated the CSS above.

[James]

Perfect!

Thank you very much David! Top support as always! <3

[David]

You’re very welcome – glad to be of help.

[Ravi Saive]

@David,

I have added the provided CSS, which is working fine on desktop, but on mobile it not rendering properly see – https://i.postimg.cc/rsjH7cPD/Whats-App-Image-2023-03-22-at-14-42-01.jpg

[David]

Hi Ravi

do you want to raise a new topic where you can share a link to your site, and i can take a look ?

[Ravi Saive]

@david,

Here is the link to site

[Ying]

Do you want the nav links stacked on mobile?

If so, try adding this CSS:

@media(max-width:767px) {
.single-post nav#nav-below {
    flex-direction: column;
}

.single-post nav#nav-below > * {
    width: 100%;
}
}

[Ravi Saive]

@David and @Ying

All I want is the prev and next nav should look like this on:

Desktop – https://i.postimg.cc/5NhSPQnX/prev-next-buttons-copyblogger-desktop.png
Mobile – https://i.postimg.cc/kgWFLMpf/prev-next-buttons-copyblogger-mobile.jpg

[Author]

Posts