Logo Image Aligned with Site Title – Sela Theme

• 

  derekmountain · Member · Apr 7, 2015 at 12:09 am

  • Copy link
  • Add topic to favorites

  I’m looking for the CSS code to put my logo image directly to the left of my site title instead of above. I’ve tried looking at other suggestions but am unable to get the correct code.

  My blog is thebrewgallery.com and I am using the Sela theme.

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Apr 7, 2015 at 9:51 am

  • Copy link

  Hi there!

  I’m not currently seeing a logo uploaded to your site. Would you be able to upload the one you’d like to use so that I can help out with the custom CSS for it? I ask because the CSS might need tweaking based on the size of your logo.

  Did you also know about our dedicated CSS forums? They’re a great place to go for future CSS help as staff and volunteers there are specialised in these sorts of questions:
  https://en.forums.wordpress.com/forum/css-customization

  If you can upload the logo then let me know, I can then help with the CSS.

• 

  derekmountain · Member · Apr 7, 2015 at 3:03 pm

  • Copy link

  Hello,

  I’ve uploaded the logo to my site.

  I noticed the CSS forum after posting my question and couldn’t find a way to delete this question and move it to the CSS forum. Sorry about that!

  Thanks!

• 

  siobhyb · Member · Apr 7, 2015 at 3:40 pm

  • Copy link

  Thank you for adding the logo!

  I think the best option is to add the image before the title using CSS. To do this, you can remove the logo from the builtin section of the theme that you uploaded it to and then add it using the following CSS snippet:

  .site-title a:before {
  content: "";
  background: url("https://thebrewgallery.files.wordpress.com/2015/04/titlelogo.jpg?w=120") no-repeat top;
  height: 120px;
  width: 60px;
  padding: 50px;
  margin-right: 5px;
  }

  You can play about with the values of padding and margin-right to get the image positioned exactly as you wish. Could you also test this on a few different devices to make sure that everything looks right? Let me know if you have any trouble. :)

• 

  derekmountain · Member · Apr 7, 2015 at 3:54 pm

  • Copy link

  Thank you so much :)

  It looks great on desktop and tablet but the title and logo don’t optimize on my mobile device.

• 

  siobhyb · Member · Apr 7, 2015 at 4:08 pm

  • Copy link

  We can use CSS media queries in order to target devices that are below a certain width. If you haven’t used media queries before, we have a guide on how to use them here:
  https://en.support.wordpress.com/custom-design/custom-css-media-queries/

  The following CSS will hide the logo on devices that are 400px or less:

  @media screen and (max-width: 400px) {
  
  .site-title a:before {
  display: none;
  }
  
  }

  If you’d like, you can also play around with different sizes and margins for the logo on smaller screens, but the CSS might be a little tricky.

• 

  derekmountain · Member · Apr 7, 2015 at 4:13 pm

  • Copy link

  I haven’t used media queries before; looks like something new for me to learn :)

  This is great, thank you very much for your help and quick responses!

• 

  siobhyb · Member · Apr 7, 2015 at 4:17 pm

  • Copy link

  You’re more than welcome! You know where to find us if you have any extra questions.