Moving previous/next buttons

  • Author
  • #1190900

    Hi there,

    Is there a way of moving these to the bottom of the posts, below the comments?


    The blog I need help with is


    This can be done, but you might want to consider that if you get a post with a lot of comments, people may not scroll down to the very bottom to find the next/previous links, rendering them more or less useless. The problem is though that the way the XHTML (markup) is structured, it would be difficult to put the next/previous links anywhere else.

    This would move the links down below the comment reply box, all the way at the bottom. The other meta data (author, date, categories and leave a reply link) then shift to the left taking the space that the next/previous links used to occupy.

    #content {
    padding: 0 0 20px;
    #nav-above {
    bottom: 10px;
    position: absolute;

    Thanks so much for your reply. That code though places the next/previous buttons at the way bottom of the post, past the footer.

    Is there a way of doing it prior to the title?
    Also while I’ve got you, is there a way of removing the byline of the piece? This project is submission focused but we will be posting from our end for legal reasons, so we’ll be putting the byline inside the posts itself.



    You said,

    below the comments

    I assumed that was where you wanted them.

    The way the XHTML (markup) is structured in this theme makes it nearly impossible to place the links above the sharing stuff. The reason for this is because you have to use position: absolute and that doesn’t float with other elements so when a post is longer or shorter, the links would stay right where they were placed (absolute position) and not adjust with the length of the post.


    This gets rid of the byline and the trailing / .

    .entry-meta .byline, .online .main-separator {
    display: none;

    Thanks for that, is there a way of placing the next/previous buttons above the post title?


    Give this a try and see what you think. Moving the nav links to the top of the post will work cleanly.

    #content {
    position: relative;
    #nav-above {
    position: absolute;
    text-align: left;
    top: 0;
    .post_title {
    padding-top: 20px;

    That works great, thanks!
    The only thing is now the dateline has moved to the very left.. is there a way of lining that bit up with the body text?

    Thanks very much for all your help!


    The width of .entry-content is currently 710px, so it might work to make the title and meta data container area the same width and center it so it matches .entry-content. Try out this example to see what I mean:

    .single .post_title {
    	width: 710px;
    	margin: 0 auto;
    	overflow: visible;
    .single .post_title h1,
    .single .post_title h2 {
    	margin: 0;
    	padding-top: 30px;

    I opted to left align the headings but you could choose to center them as well as the post meta data instead if you want. the CSS above should give you a good starting point.


    That is excellent, thank you @designsimply!

    Now just wondering if there is a way of getting the pages and the posts to match up? The pages are currently indented to the right…



    Try removing the “.single” part from the example above and also add this: .entry-meta {
    	margin: 0;

    Make sure to test the result on all types of pages (post, pages, archives, etc).


    That’s brilliant, thanks so much!


    Cheers :)

The topic ‘Moving previous/next buttons’ is closed to new replies.