• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

Register for full access

Foodie Pro Theme

Reader Interactions

Comments

  1. Stefan Breton says

    May 26, 2018 at 11:47 pm

    Hello,

    I’m getting this message when trying to update my php file:

    Your PHP code changes were rolled back due to an error on line 292 of file wp-content/themes/foodie-pro/functions.php. Please fix and try saving again.

    syntax error, unexpected ‘<', expecting end of file

    Log in to Reply
    • Brad Dalton says

      May 27, 2018 at 12:27 pm

      Stefan. Whenever you copy PHP code from a file, Do not copy this opening php tag

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.