Archived topic
Post Navi to the bottom of the post & Header Alignment
7 replies · Started by Stella on September 3, 2018
Hi,
I'm just wondering 4 things at the moment, could you please kindly help below:
1) if there is any way to move the Post Navigation ONLY from the meta info to the bottom of single posts, possibly below comments?
2) how to change the font size/color for only Post Navigation (Prev/Next Post titles) as well as the size of the arrows?
3) how to insert line above and below the Post Navigation?
4) Header and the Primary Navigation do not align with the Container of the Contents (see page Blog) vertically. Is it only possible to align the texts on the left and the right by changing the paddings manually via Layout? Or, is there any other way?
Hoping these are possible!
Many Thanks,
Hi there,
1. use the code Tom provides here ( CSS and then PHP snippet ):
Just swap the generate_before_content for generate_after_main_content in the PHP code.
2. and 3. Add this CSS:
.post-navigation, .post-navigation a {
font-size: 20px;
color: #222;
}
.post-navigation {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 5px 0;
margin-bottom: 100px !important;
}
4. This CSS:
.inside-header {
box-sizing: border-box;
}
Perfect! Thank you so much David!
Just a couple more, how could I add some space after the Post Navi, above the footer?
Also, is there any way to display the post titles in two lines if the title is too long? If not, could I add a divider in between the prev/next post?
Many Thanks
I edited the CSS above with 100px margin.
You could do this to force the lines to wrap when they extend to the middle:
.post-navigation .nav-previous, .post-navigation .nav-next {
max-width: 45%;
}
.post-navigation .nav-previous {
text-align: left;
}
.post-navigation .nav-next {
text-align: right;
}
Thank you so much! But the bottom margin is not applied - not sure if I've done anything wrong? Could you please have a look?
Thanks a lot!
I tweaked the code above - it should work now :)
Great! Thank you so much David!!
You're welcome !