Blog post navigation at bottom


#1

Hey aThemes team,

I noticed that at the bottom of my blog posts, it shows links to the newer and older posts, but there’s nothing clearly identifying them as such. All I see is just the title of the posts.

What I’d like to add is some navigation cues above the text like in this screen grab I took off another site:

Any idea as to how I can recreate this? Thanks in advance!


#2

Hello,

I would be glad to help you, but can you please provide a link to your website?

Kind Regards, Roman.


#3

Hi Roman,

Here’s the link to my site: https://www.tanveernaseer.com

I’m also interested in changing the navigation options at the bottom of the main blog page from “Older Posts” and “Newer Posts” to something like “Previous” and “Next” so it doesn’t make the content sound old. Appreciate your help with this. :slight_smile:


#4

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.nav-previous a::before {
    content: '← PREVIOUS POST';
}

.nav-next a::before {
    content: 'NEXT POST →';
}

.nav-previous a::before,
.nav-next a::before {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: gray;
}

.navigation.post-navigation .nav-links .nav-previous a,
.navigation.post-navigation .nav-links .nav-next a {
    color: #3772fe;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

Oh, and please create a new topic for your second issue to keep forum in good order and make it easier to help you. Hope for your understanding, and have a nice day! :slight_smile:


#6

Thanks Roman, that did the trick! By the way, as I’m using a child theme, I put this coding in my child theme’s stylesheet instead of using the additional CSS section. Just to be sure, that’s fine to do it that way, right?

Thanks again, Roman. And I’ll start another thread about the other query. :slight_smile:


#7

Hi Roman,

I have one minor glitch and I’m not sure if it’s because I put the above coding in my child theme’s stylesheet instead of the Additional CSS box. Basically, the navigation text I wanted to add on the single blog page is now also showing on top of the navigation text found on the blog pages themselves. Here’s the link so you can see what I mean - https://www.tanveernaseer.com/blog/page/2/

Now I don’t mind using the styling you created with the coding above in place of the default text, except that I would prefer the font be a bit larger (if I change the font-size 12px to something higher, will that do it?). Alternatively, if there’s a way to simply have this show up on single blog pages, I’m good with that and will start a new query about the main blog pages themselves.

Thanks Roman!


#8

Hello,

  1. Yes, it’s okay to add CSS code into child theme stylesheet as well.

  2. Please try to use this CSS code instead of previous, it shouldn’t affect blog page:

.single .nav-previous a::before {
    content: '← PREVIOUS POST';
}

.single .nav-next a::before {
    content: 'NEXT POST →';
}

.single .nav-previous a::before,
.single .nav-next a::before {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: gray;
}

.single .navigation.post-navigation .nav-links .nav-previous a,
.single .navigation.post-navigation .nav-links .nav-next a {
    color: #3772fe;
}

Kind Regards, Roman.


#9

P. S.
And yes, you can increase 12px value to make that font larger :slight_smile:


#10

Thanks Roman. This last CSS code did the trick. Thanks again!


#11

Okay, you are welcome!

And have a nice day :slight_smile:

Kind Regards, Roman.


closed #12