Add Responsive Full Width Background Image To Altitude Pro Site Header

This solution enables you to display a full width image behind the site header in the Altitude Pro child theme by StudioPress. You can set the default image named header.jpg in your child themes images folder or change the image using the WordPress customizer.

Instructions

After downloading the folder for members below, follow these simple steps:

Note: Don’t copy the opening php tag from any files!

Step 1 : Using a code editor, add the PHP code from the functions.php file to your child themes functions file.
Step 2 : Copy and paste the js files from the js folder to your child themes js folder.
Step 3 : Copy the PHP code from the customize.php file inside the lib folder to the customize.php file in your child themes lib folder. Or, you can add this code to your functions file.
Step 4 : Upload your default header.jpg image to your child themes images folder.
Step 5 : Follow the CSS modifications below.

CSS Modifications

Line 1132, remove the CSS rule which adds a bottom border:

.nav-secondary {
	border-bottom: 1px solid #fff;
}

Also line 922, remove this:

.featured-section .site-header > .wrap {
	border-bottom: 1px solid #fff;
}

Here’s the code logged in members can download.