This tutorial, tested on the latest version of the Lifestyle Pro child theme by StudioPress, enables you to add a full width image to your site header.
Here’s the default header:
And here’s the header with the padding removed so that the header image shows full size:
This fully mobile responsive solution, also enables you to display the search box, social icons and anything else in the header right widget area.
This solution also works in most StudioPress & Genesis child themes.
Here’s the demo video.
1. Demo Video – Header Image
This video shows the header right width area content floating over the header background image as well as how the image behaves on smaller screens widths.
2. Demo Video – Logo Over Header Image
This video shows you how to float your logo over the header background image via the WordPress customizer as well as how it reacts on smaller screens.
Here’s the 2 minute setup instructions for logged in users: