Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Arrow position in previous/ next post navigation

Home Forums Support Arrow position in previous/ next post navigation

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #157579
    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

    #157682
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #157755
    Larry

    Thanks Tom

    That works perfectly.

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

    Larry

    #157790
    Tom
    Lead Developer
    Lead Developer
    #391918
    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;
    })

    #392226
    Tom
    Lead Developer
    Lead Developer

    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?

    #392631
    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,

    #392983
    Tom
    Lead Developer
    Lead Developer

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

    #409592
    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,

    #409624
    Tom
    Lead Developer
    Lead Developer

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

    #409631
    Bob

    Thanks for your great work and product! 😀

    #409634
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.