Twentyeleven Previous/Next navigation to fitting at top of screen

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!! ??