Make a Full Width Twenty Sixteen Theme Header

Here’s how you can make a full width header with a background image in WordPress’ latest default theme ‘Twenty Sixteen’.

So above I have just chosen the color scheme as grey and added a header image, which just sits the image below the the site title and menu – maybe you want the image as a background image instead behind the site title and menu and also to go full width. This will utilise the header space.

CSS Containers

First up is to remove the controlling site-inner containers CSS and then set the same max width on the site-content, site-header-main and site-footer. So you’ll need to add this at the end of your style.css

Header Markup

Next up is to remove the .header-image div that contains the image and then set a background CSS rule to .site-header so the header image sits behind it still using the uploaded file via the customizer – this uses the get_header_image function. The CSS background rule also is setting the image to not repeat and focuses on the center of the image.

Below is the changed header.php file

Now it should resemble something like the below – which we still need to add some more CSS to control how it fills the space, how deep you want it and add some margin in front of the content.

 

Header CSS

So this is also added in your style.css with the other snippet, the first rule background-size covers the area, the min-height will set the minimum depth this will depend on how much of the image you want to show and finally just a bit of margin to separate the main content.

Now you should have something like the below.

 

 

Changing the Default Header Size

You can also change the Twenty Sixteen default header image size by adjusting the width and height values in the /inc/customizer.php file from line 53

 add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array(
 'default-text-color' => $default_text_color,
 'width' => 1600,
 'height' => 200,
 'flex-height' => true,
 'wp-head-callback' => 'twentysixteen_header_style',
 ) ) ); 

Adjust the width and height for a new image to suit, or if you don’t want to change the original theme file you can use the filter twentysixteen_custom_header_args and add the change in your functions.php

You certainly want to do it this way if you have a parent/child set up so you preserve your changes on any parent update.

 

Demo site here.