So, there’s an easy, medium, and complex way to do this, depending upon your level of technical expertise. The easy way is adding a pseudo element through CSS and setting the background-image property, but it’s not very flexible in terms of responsiveness and the results won’t look very good. The complex way involves creating a child theme, making a copy of the header.php file, and adding an image tag to it. You would have to know how to use an FTP client, or your host’s cPanel application, and create a folder on your site to hold the child theme.
The medium way doesn’t involve creating a child theme, but you have to install a plugin in order to add the image tag. The results will be just the same as the complex way. It looks like you’ve already installed JetPack and a Mailchimp plugin, so I’m going to assume that adding another plugin won’t be a challenge for you. Here are the steps, then:
Install the Header and Footer plugin. This plugin will allow you to add some code that will add an image tag to your header.
Once the plugin is installed and activated, go to Settings → Header and Footer. Copy & paste these lines in the field labeled Code to be added on HEAD section of every page:
<script>
jQuery(document).ready(function($){
// Add an image element before the site title
$('.site-branding').prepend('<img id="logo" src="http://www.allthingsauntie.com/wp-content/uploads/2015/01/LogoColorNoText1.jpeg" />');
});
</script>
Remember to click the save button down at the bottom.
So, you should now see the logo in the header of your site on top of your site title. If you want to move the logo image to the side, you’ll need to add some CSS to do some styling. It looks like you have JetPack’s custom CSS option activated, so you can start by adding these CSS rules to your custom CSS (Appearance → Edit CSS):
#logo {
float: left;
margin-left: 30px;
margin-bottom: 20px;
}
#nav-wrapper {
clear: both;
}
@media screen and (max-width: 600px) {
#logo {
float: none;
margin-bottom: 0;
}
}
The first rule positions the logo to the left, and adds some spacing (margin) from the left edge, and below the image.
The second rule makes sure the navigation menu items all get pushed down below the bottom of the logo.
The third rule is a media query which places the logo over the title when the screen width gets below the size of a mobile device.
You can play around with the CSS to move the logo around, and perhaps add some other CSS to move the site title & description around.
