Try this:
.back-to-top {
padding-right: 160px;
}
Hi Dave – to scale down gracefully it needs to float in the middle of the right-hand section of the white footer…the same as the social icons float in the left section when they are in the footer. I tried:
margin-left:auto;
margin-right:auto;
but that didn’t do it.
The usual centering code is:
margin: 0 auto;
I’ve never totally mastered the Media Library. The trick I use is to load my images into a fixed folder (eg wp-content/uploads/_media so that when you add <a href="”xxx”"> it’s easy to find the images. I also add dimensions to the image name (eg rdell_logo_270x250.jpg, rdell_logo_270x250_transparent) to make it easy to identify them. Works for me. Try googling Codex Media Library for more info.
@chappie you could try
.back-to-top {
float: none;
}
Sorry – I’ll try that again. I can change the colour of “Back to top” with:
footer#footer .colophon .pull-right a {
color: #8f48e2;
}
But all my attempts to relatively re-position it to match the centre positions of the other footer elements (social icons and credits) have failed. This does move it to exactly where I want it on a wide viewport but it breaks it into two lines on laptop screens and smaller (suggesting that I actually want it to float left within what I assume is a 150px wide container down there):
footer#footer .colophon .pull-right a {
padding-right: 150px;
Of the other options I have played with:
margin-right:auto does nothing
position:relative does nothing
pull-left does nothing
float:none does nothing; and
position:absolute;
left:0px;
overflow:inherit;
moves it to the left of the page
I’ve been searching the code for other elements to target instead and found something called a modal-footer, whatever that is. But it had some text right-alignment applied to it so I tried:
.modal-footer {
text-align: left;
…and that did nothing (that I could see).
I’m hoping someone will know the answer. It isn’t even logical (to me) that this element should be aligned to the right when the other two elements in the white footer are centred within their spans.
Ho-hum. The div class hierarchy down there appears to be:
“colophon”
“container” :before
“row-fluid” :before
“span4 backtop” <p class=”pull-right”><a class=”back-to-top”
…which hasn’t helped me yet…
I would like to have the sticky menu for the larger viewports and have it auto-deactivate as soon as the 3-bar menu kicks in since it takes up a lot of screen estate at smaller screen sizes.
Can anyone please tell me how to deactivate it for tablet/phone sizes?
Thanks as ever.
You need to use @media code.
Rather than leave the sticky menu code in the main section before the @media where it will be executed by default, I’d try moving the code into a @media block for larger viewports (eg>979px). So the default will be not sticky unless viewport>979px.
Apologies – my sticky menu question is in the wrong thread. And thank you Dave. You may be shocked to hear that I worked it out for myself!
Now, back on topic…
I’ve lost the thread! Back-to-top? Any link available?
I hope this is the “back-to-top” thread Dave! But I’m obviously confused.
For the sake of clarity, I’m nowhere near solving my issue in this thread. The one I did work out was the Sticky Navbar @media fix.
Can we see a link? Be specific again on where you want back-to-top moved to.
I’m with it now. Here’s an image. The vertical red lines are on the centre point of the FP images and 2 of the 3 elements in the white footer. The rogue is “Back-to-top” which is pushed right. How can I centre it on the right-hand vertical so as to be consistent?
http://s1008.photobucket.com/user/3785/media/public/back-to-top.png.html
OK, try this:
footer#footer .colophon a.back-to-top {
position: relative;
left: -300%
}
I’ve used % rather than px for smaller viewports, but you’d need to check it and add @media adjustments.
