Need help? Check out our Support site, then

How to Move Logo to Immediate Left of Blog Title in Sela Theme

  1. Hi, I've scoured the Sela forums but haven't found how to move my logo to the immediate left of my blog title on my site:

    I would like my small logo of a succulent in a pot to sit right above the subtitle word, "Miniature." If someone could please advise me, I would be most appreciative. Or if there is a link specific to creating this kind of tweak, please feel free to post it here, as well. Thanks!

    The blog I need help with is

  2. Hi there,

    We can use two approaches here. One is to utilize absolute positioning, the other is CSS3 transforms. I'm going with the latter, because the position of the logo will change if screen size changes or you zoom in.

    Give a try to this:

    .site-logo {
    	-ms-transform: translate(-154px, 50px);
    	-webkit-transform: translate(-154px, 50px);
    	transform: translate(-154px, 50px);

    Should work on all browsers, including Internet Explorer 9+. You can change the horizontal and vertical px values according to your liking! :)

  3. Hi there, delete your site logo in the Customizer and then put the following into your custom CSS. It places the logo into the linked text div for your site title.

    .site-title a {
        background: rgba(0, 0, 0, 0) url("") no-repeat scroll 0 0 transparent;
        padding-left: 55px;
  4. And there you go, you have two solutions, one from @ehtis and one from me. :)

  5. The more the merrier. ;)

  6. Hi guys, thanks for your help. Ehtis, I'm afraid your tweak placed it to the immediate left, but somewhat raised above the title, almost like superscript. I definitely like the idea of the position being relative to the title, rather than fixed, as I'd like it to look consistent across browsers.

    Thesacredpath, I used your tweak after deleting the logo, but I am not sure where to put the logo now so that it shows up. Also, I don't think I want to move the title over any in order to fit the logo, as I believe it will still look nice just floating to the immediate left of the title. I appreciate any tweaks you can suggest. Thanks!

  7. Hi guys, thanks for your help. Ehtis, I'm afraid your tweak placed it to the immediate left, but somewhat raised above the title, almost like superscript

    In the code above, 50px is the Y component or vertical position value. I'm changing it to 53px, try altering the value to place it at the desired position:

    .site-logo {
    	-ms-transform: translate(-154px, 53px);
    	-webkit-transform: translate(-154px, 53px);
    	transform: translate(-154px, 53px);
  8. Hi soosucculent

    Try this without the color reference.

    .site-title a {
        background: url("") no-repeat scroll 0 0 transparent;
        padding-left: 55px;
  9. Hi Ehtis, thanks, but it's still superscript-style. I left it in place so you can see it. Any other thoughts?

  10. Hi g471n, thanks! That's definitely the distance I would like the logo to be from the title word "Soo." I would still like to have the title centered over the subtitle, though. Could you please suggest how to move it?

    Also, despite my desire to have as many succulents as possible, how do I get rid of the second logo that suddenly appeared again above my title when implementing this CSS edit?

  11. I'm not sure how second one grew :)

    You can remove it with:

    .site-logo {
        display: none;
  12. To centre the text of the title.

    .site-title {
        margin-right: 1.4em;
  13. Thanks, g471n! That worked for removing the second logo that was on top. I'd still like to center the title again, if you have any tips for that.

    I also noticed that when viewing the mobile site now, the title no longer fits on one line due to the logo being a part of it. Do you know how wide a title can be to show up on an iphone 5 regular-sized screen? Thanks!

  14. CSS to centre the text above.

    I'm not sure about the width for iPhone but I just had a look at it on my iPod touch and I think it still looks good on 2 lines.

Topic Closed

This topic has been closed to new replies.

About this Topic