Support » Themes and Templates » Twentyeleven Previous/Next navigation to fitting at top of screen

  • I am using Twentyeleven with a right sidebar, and most posts use the MORE feature, which opens the full post in a single column. At the top right of the single column page is Previous, preceded by a small arrow, and Next, followed by a small arrow. The small arrow that should appear after to NEXT appears instead on the line below. I assume that the margin setting needs to be changed, and I have searched everywhere, but cannot find reference to where I can find the correct margin settings. I copied the following code into my twentyeleven child style.css, but changing it had no effect. My blog is Thanks for any help you can offer.

    [CSS code moderated – the link to your site is enough to access the styles]

Viewing 9 replies - 1 through 9 (of 9 total)
  • FWIW, the links and the arrows appear on the same line in my browser — Firefox 11.0 on Mac. 10.7.3. I checked Safari too, and it does show the problem you mention. Of course, Safari does not have Firebug, so that’s a pain in the butt. But using Firebug, I found that you can add a margin to the right side which will move that nav to the left — and hopefully solve the problem. I can’t test it as I cannot actually change the code in Safari as I can in Firefox. So try adding the margin-right per the below:

    #nav-single {
        float: right;
        margin-right: 30px;
        position: relative;
        text-align: right;
        top: -0.3em;
        z-index: 1;

    I just used 30px to see if it moved the line over — but you can try whatever spacing you want and see what works and looks best.

    As you can see, the relevant CSS declaration is not in the code you copied above — but it’s in the stylesheet — line 1720 according to my Firebug.

    BTW, you are not allowed to post more than 10 lines of code in here — you need to use pastebin.

    I checked it in Chrome, if you get rid of this declaration it looks fine:

    #nav-single .nav-next {
        padding-left: .5em;

    It shows up on about line 1732 of style.css – if you want to leave the original alone and override it in a child theme just repeat the above declaration in your child theme css file and change the padding value to 0.

    Thanks for your replies — and for the information about not including code that is too long. I will remember that. I am glad this just seems to be a Safari issue — I hadn’t taken the time to check it out on Firefox or on a PC. Now that I know which code to play with, I played. And it seems that the problem is not with the margin or padding, but the way the arrow is attached to the word NEXT. I can push the whole line to the left, and the arrow still appears on the line below. Does anyone know if there is accessible code where I can remove the arrows?

    Did you try changing the right margin per the above? What happened? The arrow and words are styled as a single element by the CSS – it’s just that when a “floated” element runs out of space it goes to the next line below. Floating in CSS can be tricky.

    Removing the arrows would require you to edit the php templates — which you should only do in a child theme. I’m not well-versed in php so I can’t offer advice on that.

    It appears you added the css I showed you above in your child theme, but you didn’t change the padding value to 0, you left it at .5em. Make it 0, that will fix your arrow problem in all browsers..

    Thanks, graydarling, but I did make the change you suggested, and it did not make any change in Safari, so I put it back the way it was. I just changed it again to padding ‘ ‘ ‘padding-left: 0;’ so you can see.

    And WPyogi, I did add a rather large right margin, and as I said, when I did the the line moved left, including the word NEXT, but in Safari the arrow is still on the next line — directly below the word NEXT.

    Try using Developer Tools for Safari / Firefox / Chrome so you can turn on / off / change the css locally and see the immediate difference. And are you refreshing your browser to clear the cache after you make edits to your css file? Because that padding is your problem. Period.

    I had the same problem with Safari but the padding stuff just (replacing 0.5 to 0) works fine! Even with the Hungarian translation. The arrow gets into the same row. When you do this, make sure you either empty your browser cache or just simply reload the page (the latter worked fine for me). Garydarling, thanks for the solution! (I use Safari 5.1.5)

    Had the exact same problem in Chrome this afternoon and changing .5em to just 0 worked a treat! Awesome!! 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Twentyeleven Previous/Next navigation to fitting at top of screen’ is closed to new replies.