[Theme: Harmonic] I need help with adding logo in header

Patrik,
What theme are you using? As a developer I have edited the actual theme sources. Meaning the Header.php file for typical themes. Or use php scripts for frameworks.
If your theme has the header.php file then you can edit this file where you see the title. Again it depends on the theme that you are using.

First, thank you for your reply tculkin.
As I described in title, I am using Harmonic theme. Can you please tell me what should I change and where in header.php?
Thank you ??

Hi Patrik, there are a couple ways of doing this without having to edit the theme php script files involving CSS only solutions. Which will work for you will depend on the image you are wanting to use and its size.

This solution adds the image as “content” to the front of the site title div (#masthead h1). It doesn’t allow much control of size, so the image would need to be sized properly before you add it.

#masthead h1:before {
    content: url("URL_OF_IMAGE");
}

This second solution adds the image as a background to the site title div (#masthead h1) and then adds padding on the left of the site title to make room for the image. This allows a bit more control over things. I’ve used the background-size declaration and contained the image to the space available (in this case the height).

#masthead h1 {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 transparent;
    background-size: contain;
    padding-left: 40px;
}

In both cases you would replace URL_OF_IMAGE between the quote marks with the URL of your uploaded image. I would suggest sizing the image as close to the final size you wish to be displayed so that it stays as sharp, clear and crisp as possible.

If after trying the above two solutions, if you cannot get things right, let me know and please provide a link to the image in your media library for my reference.

Hi Sacredpath,

I have tried both solutions that you described and I managed to get image to the header. I also resized my logo using Photoshop so that it would fit, but no matter what size of image I use, the theme resizes it so it looks like this (too big and low quality): https://www.arhphototeam.com
Do you have any idea how could I fix that?

Thank you very much ??
Patrik

Hi, let’s change that code to the following, which allows us to better control size.

#site-branding {
    background: url("https://arhphototeam.com/wp-content/uploads/2016/01/Logo-samo-A-pomanj?an6.png") no-repeat scroll;
    background-size: auto 65%;
    background-position: 20px 15px;
}

You can play with the 65% background size and also the position.

Great, it’s perfect now! Thank you.
Can i ask you one more thing?
Is there any possible way to move the “Social menu” icons a few pixels to the right. I want it to look like on this theme demo page: https://harmonicdemo.wordpress.com (there is more space between “Harmonic” and social widgets). ??

Sure, add some padding to the left of the social media icons like this, adjusting the value as you like:

.social-links-wrapper {
  padding-left: 40px;
}