Previous/Next Navigation — Move to the top

  • x9this · Member ·

    Hello,

    I am not good with the CSS language at all so I need a really simple solution here. My site has Previous/Next Post Navigation links but these live at the extreme bottom of the page. Even after the Comments section. It’s unintuitive and I’m sure my readers cannot find it. How do I push this navigation aspect to the top of the page? Can I put it in the sidebar? There doesn’t seem to be a corresponding widget for Previous/Next Navigation so it’s not like I can add a redundant one. When I go to the Customize screen, the built-in Previous/Next Navigation doesn’t register as its own block or box so I can’t edit it directly.

    Help!

    The blog I need help with is: (visible only to logged in users)

  • fstat · Staff ·

    Hi there,

    Please add the following custom CSS via “My Sites -> Design -> Customize -> CSS”:

    .single-post #main {
    display: flex;
    flex-direction: column;
}

.single-psot #main article {
    order: 1;
}

.single-post #main .post-navigation {
    order: 2;
}
.single-post #main #comments {
    order: 3;
}

body:not(.twentyseventeen-front-page) #comments {
    margin-left: 0;
    margin-right: 0;
}

    This will move the navigation links right after the article and before the comments section.

  • x9this · Member ·

    Thank you fstat for this swift reply!! So that worked but I still want the Navigation arrows to be higher. I took a screenshot and posted it on my blog to demonstrate. Sorry that it’s nested with a bunch of other page stuff and potentially hard to parse.

    https://x9dread.com/2019/03/01/image-for-tech-support-re-navigation-css/

  • supernovia · Staff ·

    Ah okay. It’s possible to move elements around the page with CSS, however it’s a bit outside our scope of support:
    https://en.support.wordpress.com/custom-design/css-support/

    There are several factors to take into consideration when moving elements around on a layout, particularly considering you’ve got different layouts for phones and tablets. So while it’s usually possible to do it, we’d recommend getting a designer or developer to help with that part. UpWork.com is a good resource.

    If next/previous are the most important options on the page, for example if the posts need to be read in sequence, you might consider removing some of the other options that would get people off track (like Related Posts).

  • The topic ‘Previous/Next Navigation — Move to the top’ is closed to new replies.