Add a Larger Header to the Travel Pretty Theme

The Travel Pretty theme by Pretty Darn Cute Design allows you to upload a custom header. The header size recommended by the theme is 1000px by 500px. This header image reduces in size in order to remain mobile responsive and retina ready. This tutorial will show you how to Add a Larger Header to the Travel Pretty Theme.

 

In order to display a header image which extends the full width of the content area (1200px), you will need to update the custom header size in your functions.php file to 2400px.

Look for this in your functions.php file:

Update the height and width to accommodate the size of your full-width header image.

After updating your functions.php file, you’ll next need to update your stylesheet. Look for this:

Update the min-height to equal half the height of the size in your functions.php file.

In my example, I wanted the image to display at 1200px by 275px. I updated my functions file to this:

And my stylesheet to this:

Here is how it looks:

I added additional CSS styling to my media queries to reduce some of the white space on smaller screens:

Here’s how it looks on a device under 640px wide:

Are you looking for help with adding a larger header to your Travel Pretty site? Send me a note!