Foodie Pro Mobile Responsive Full Width Header Image

This tutorial provides the step by step instructions ( Fully Supported for members ) which enable you to add a mobile responsive, full width header image to the Foodie Pro child theme.

Foodie Pro by Shay Bocks has been the top selling Genesis child theme for several years now and is also included in the Pro Plus ( All Themes ) package by StudioPress.

Depending on the colors in your image, you may also want to change the colors of the site title and header menu links. Here’s the CSS to do that.

Change Background Color of Header Elements

The following CSS edits enable you to change the background color of the header right widget menu and site title.

Line 1629 in style.css, add the following declaration background-color: transparent; to the existing CSS rule so it now looks like this:

.site-header .widget-area,
.site-header .widget-area .genesis-nav-menu {
float: right;
	text-align: right;
	max-width: 710px;
	background-color: transparent;
}

The following CSS enables you to change the color of the site title.

.site-title a {
    color: white;
}

Use the following CSS to change the nav menu link color in the header right widget area:

.site-header .widget-area .genesis-nav-menu a {
    float: right;
	text-align: right;
	max-width: 710px;
	color: white;
}

Full Width Header Image – Installation

Here’s the 3 steps you need to take to install the code after downloading the folder below:

Step 1 : Copy & paste the PHP code from the functions.php file in the download folder ( minus the opening php tag ) to the end of the Foodie Pro themes functions.php file.