There’s different ways you can add a logo or any other image inline with your sites title.
You can filter the default function for the title using PHP code and then add styling for your new title and image.
Or you can simply add a background image to your existing title and modify the default CSS code.
In this tutorial, we’ll use the CSS method and the Metro Pro theme by StudioPress as an example:
Here’s the result of what this solution produces using an image which is 200px width by 100px height:
And here’s an example of what the default text title looks like without the image.
Default Site Title CSS
Here’s the default CSS code we need to modify in your child themes style.css file starting at Line 935:
.site-title {
font-family: 'Oswald', sans-serif;
font-size: 48px;
font-size: 4.8rem;
line-height: 1;
margin: 0 0 16px;
margin: 0 0 1.6rem;
text-transform: uppercase;
}
.site-title a,
.site-title a:hover {
background-color: #f96e5b;
color: #fff;
display: inline-block;
padding: 16px;
padding: 1.6rem;
text-decoration: none;
}Customized CSS Code
After uploading the logo image to your child themes images folder and adding CSS code, here’s the working CSS you can add at the end of your child themes style.css file or replace with the default.
.site-title {
background-image: url(images/image.png);
background-repeat: no-repeat;
font-family: 'Oswald', sans-serif;
font-size: 68px;
font-size: 6.8rem;
line-height: 1;
margin: 0 0 16px;
margin: 0 0 1.6rem;
text-transform: uppercase;
float: left;
}
.site-title a {
background-color: #f96e5b;
color: #fff;
display: inline-block;
padding: 16px;
padding: 1.6rem;
text-decoration: none;
float: none;
margin-left: 200px;
}CSS For Hover Effect
You could also add this code and modify the values for the background color and text color when the title is hovered:
.site-title a:hover {
background-color: #E4E4E4;
color: #2A93C2;
display: inline-block;
padding: 16px;
padding: 1.6rem;
text-decoration: none;
float: none;
margin-left: 200px;
}And here’s the hover view.
To make the title area the same height as your image, simply change the font size for the site-title.
Mobile Responsiveness?
This will depend on the dimensions of your image however its not difficult to add a class for your image with different values when viewed on different sized screens/devices to the existing Media Queries included in all Pro themes.
is there a chance to get the logo clickable ?
Hey there – I can’t get this to work with the new Outreach Pro – can you give it a shot and let me know if i’m missing something. thanks so much – yours is my Favorite tuts site for genesis!
Just tested on the new Outreach Pro theme and works perfectly.
hey Brad – thanks for the speedy reply – your graphic above is showing the logo in the Nav Gar – the tutorial above is for Next to Site Title – this is what I’m hoping to do. can you give me an example of that? thx again!!
Sorry. Confused there for a minute.
I will need to test the solution with the new theme to make sure it works but i think its going to be pretty much the same.
Make sure your image path and file name are correct.
the image path / file name is correct – the logo shows up, but sits behind the Site Title text, not next to it. thx
hey there Brad – any luck on this yet? thx so much – your site is great!
Hard to say Paul.
Would need to look at all your code and test it locally using the same theme you’re using.
When i tested it and took the screenshots, i was using Metro Pro. May need tweaking for other themes.
This is a brilliant idea! My company intranet’s website uses this technique to place announcements and they are always clicked.