Add Larger Header to Restored 316 Darling Theme

In this tutorial, I will show you how to add a Larger Header to the Darling Theme by Restored 316 Designs.

In the Restored 316 Facebook community, someone asked how to increase the size of the header image on the Darling theme, in order to display a full width header.

By default, the Darling theme displays a header image which is uploaded at 700px by 300px; it reduces the image size to display at 50% of the uploaded size, in order to remain retina ready, and mobile responsive. If we want to display a full width header, we’ll need to make some theme customizations. The maximum width of the theme is 1200px, so if we want to display a header image which is 1200px wide, we will need to add upload a header image which is 2400px wide.

Add Larger Header to Restored 316 Darling Theme – Update your functions.php file:

Navigate to Dashboard > Appearance > Editor > functions.php. Look for this:

Change it to:

You can make the height any height you prefer, but remember, it will need to be uploaded at twice the size you want to display. In our example, we want the header to display at 1200px wide by 150px high, so we’ll upload a header image which is 2400px by 300px.

Once you have updated your functions.php file, we’re ready to upload the header image.

Add Larger Header to Restored 316 Darling Theme – add larger header image to your site

Navigate to Dashboard > Appearance > Header

1. Click “Add New Image“
2. Select the image from your media library (or upload a new image)
3. Click “Select and Crop“
4. Click “Skip Cropping“
5. Click “Publish“

Add Larger Header to Restored 316 Darling Theme – Update CSS:

Next, we will need to adjust our stylesheet. I recommend making any CSS updates by adding to your “Additional CSS” (Dashboard > Appearance > Customize > Additional CSS). There are several reasons for doing this:

1. It won’t be overwritten if the child theme is updated
2. It will override anything currently in your stylesheet
3. It will be easier for you to see what changes you’ve made if you need to come back to it later.

The Darling theme’s CSS “forces” the header to display at 350px by 150px. We are going to update that. Add this to your “Additional CSS“:

What this does is allow the header image to display at 1200px wide when viewing on a desktop, but also has multiple breakpoints based on the media queries of the demo, to accommodate smaller devices. If we didn’t adjust for mobile viewing, the header image would not be mobile responsive.

If you’re using the Restored 316 Darling Theme, or any other theme built on the Genesis Framework, and are interested in having me implement this for you, send me a note!

Did you know I offer a theme setup service? Get your Restored 316 theme installed and set up like the demo in under 24 hours. Learn more here.