Always wondered how to make your header logo bigger? Have a gorgeous logo, and want it to shine? This one’s for you, friend! I’ll show you how to make that pretty logo stand out, and it’s super simple.
Obligatory Disclaimer: Please save a copy of your css file prior to making any changes.
I’ll be using the new Pretty WordPress Theme for this tutorial, but you’ll see it can be adapted for any of our themes. When designing a premade WordPress theme there are many, many factors that need to be considered. The most important these days is ensuring each design is completely mobile responsive, as google now factors that into it’s search results.
Is your site mobile friendly? If you are not quite sure, I wrote a post a while back that might be helpful.
In order to ensure mobile friendly responsiveness, I create a standard header image size designed to look good on all devices, and in all resolutions. Because the defined image size is high res, you can adjust the space in your css to accommodate a larger image size super easily. Let’s get started.
How to Make Your Header Logo Bigger
Open your style.css file and search for the following:
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 100px;
margin: 10px auto;
text-indent: -9999px;
max-width: 300px;
}
and change the max-width and height to whatever size you prefer. The image dimensions you’re working with for the default are 1200px by 400px, so make sure the height and width match up.
As an example, if you were to increase your max-width from 300px to 500px, your new height would be 167px. A 700px wide logo would require a height of 233px, and so on.
The easiest way to calculate this is to open the template included with the Pretty WordPress Theme in Photoshop and select “image size” from the image menu up top. Then simply adjust the width and the height will automatically appear.
Once you have your header image the size you like, scroll down in your css file until you see the Media Queries section, and specifically look for the 600px query, seen below.
@media only screen and (max-width: 600px) {
Below that top line and opening bracket, add the following..
.header-image .site-title > a {
height: 100px;
width: 300px;
}
Your end product should look like this
@media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 100px;
width: 300px;
}
That’s it, you’re ready to go on both mobile and desktop. If you wanted to get super picky, you could address various screen sizes from 600px and down, creating a different height and width for each, but 300px is perfect for all by default.
If you found this tutorial useful, you might love our TADA Membership. Check out how we teach you to DIY your website at Learn.PrettyDarnCute.com.
xo Lindsey
