Moving post next/previous nav to bottom of post in Coraline

  • Author
    Posts
  • #1441077

    The next/previous navigation with title text takes up a lot of room at the top of a post – I’d like to move it to the bottom of posts. I use Coraline. What code would move post nav to the bottom of posts?

    Also there’s a lot going on at the bottom of posts with like and sharing features, categories, leave a comment, footers etc. I’d like to have some white space around the next/previous nav links so I don’t add to the clutter.

    Thanks for any help!

    The blog I need help with is indiapiedaterre.com.

    #1441173

    siobhyb
    Staff

    Hey. Try the following CSS snippet and let me know if it suits your needs. :)

    #content {
    position: relative;
    padding-bottom: 85px;
    }
    
    .navigation {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 25px;
    }
    #1441230

    Hi, thank you so much for the snippet! I tried it and the navigation links didn’t move yet. Should I be replacing some CSS code with this? I didn’t find anything similar in the Coraline code. So, so far I just added this snippet into the CSS code but it didn’t yet make a change.

    #1441231

    Here is what I found in CSS that might be the current code for post navigation:

    .nav-previous {
    	float: left;
    	width: 50%;
    }
    
    .nav-next {
    	float: right;
    	text-align: right;
    	width: 50%;
    }
    
    #nav-above,.single #nav-below {
    	display: none;
    }
    
    .paged #nav-above,.single #nav-above {
    	display: block;
    }
    #1441232

    siobhyb
    Staff

    Hey. Yes, you’re right, the CSS you posted does target the previous and next navigational items for your posts. However, in order to move these two items about, you will need to target the “navigation” div that surrounds them and use absolute positioning: http://css-tricks.com/absolute-positioning-inside-relative-positioning/.

    From looking at your source code, I see that you may have copied and pasted Coraline’s CSS in its entirety into your custom CSS editor?

    By default, the custom CSS you add to the CSS editor will be loaded after the theme’s original CSS which means that your newly added CSS takes precedence and override the theme’s styles.

    If you wanted to use Coraline’s original CSS as a point of reference for editing your site, the best thing to do is to use your browser tools. Right-click and select the “Inspect Element” option to see the HTML of the item you clicked on as well as all the CSS that applies to it. Two popular tools for viewing CSS are Firebug for Firefox and Chrome’s built-in Developer Tools. (http://getfirebug.com/ and https://developers.google.com/chrome-developer-tools/ respectively.)

    Try clearing your CSS editor and inputting only the original snippet that I provided. This should work. I think that there may have been some conflicts with the other CSS in your editor.

    Let me know how you get on with this.

The topic ‘Moving post next/previous nav to bottom of post in Coraline’ is closed to new replies.