[Resolved] Arrow position in previous/ next post navigation

[Larry]

Hi Tom

I finally have a question that I couldn’t find answered on the forum.

The arrow icon for the previous post at the bottom of the page shows left; i.e. <<previous post title
The arrow for the next post is also on the left; i.e. >>next post title
How can I get the arrow for the next post to show after the title: next post title>>?

I have found the CSS but don’t know how to redefine the class or pseudo-class.
The relevant CSS is:

#nav-below > div.nav-next > span
.nav-next .next:before

The address is http://www.ucuzhavuz.com/

Thanks

[Tom]

Hi Larry,

This CSS should help:

.nav-next .next:after {
    content: "\f105";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    position: relative;
    margin-left: 0;
    width: 13px;
    text-align: center;
}

.nav-next .next:before {
    display: none;
}

[Larry]

Thanks Tom

That works perfectly.

I changed margin-left: 0; to margin-left: 5px; to match the spacing on the left.

Larry

[Tom]

You’re welcome! 🙂

[Bob]

Hi

I am pulling my hair out over what I suspect is stupidity on my part, but I hope you can help. I have switched the .nav-next and .nav-previous (via float in CSS) to switch the (illogical) wordpress order.

As a result I do not want display the left arrow for the .nav-previous as I now have one on right of the post title using a modified version of your CSS above. So the .nav-previous navigation (which I now have as next) looks like:

< [Post title] >

Every combination of the below with “a” and .next and other things doesn’t get rid of that pesky arrow. I can get rid of the whole thing, but that isn’t much use…

.nav-previous .previous:before {
display: none;
}

Any ideas?

Best,

(my full attempt is:
/*Navigation arrows etc*/

.nav-next .next:before {
content: “\f104”;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
position: relative;
margin-left: .6em;
width: 13px;
text-align: center;
}

.nav-previous a:after {
content: “\f105”;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
position: relative;
margin-left: .6em;
width: 13px;
text-align: center;
}

.nav-previous a:before {
display: none;
}

.nav-next, .nav-previous {
display: inline;
})

[Tom]

Why doesn’t this work?:

.nav-previous .previous:before {
    display: none;
}

Technically that should remove just the arrow.

If not, can you link me to the page?

[Bob]

I’m not sure why it isn’t working. I’m on localhhost developing a new thing, so I can’t link to the page. I’ll keep plugging away; I got rid of all child php docs (where I may have made various changes overtime), GP hooks etc, but it still didn’t disappear. I’ll let you know if I ever solve it!

Best,

[Tom]

Sounds good – you can always throw it up quickly on a live server if you’d like me to take a look 🙂

[Bob]

Hi there

I managed to figure this out – as expected a very small tweak was needed. This works to get rid of that arrow:

.nav-previous .prev:before {
      display: none;
}

I dove into the developer tool in chrome and saw the span class wasn’t actually .previous:before, but per above. The Title is ‘Previous’, but not the span class.

Best,

[Tom]

Awesome, glad you got it working. Thanks for sharing your code! 🙂

[Bob]

Thanks for your great work and product! 😀

[Tom]

Thanks for using it! 🙂

[Author]

Posts