• 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

Metro Pro Full Width of Site Header Image

This tutorial enables you to add a responsive full width header image to the Metro Pro child theme by StudioPress. On top of this, the code adds your image to the background of the site header so you can also display:

  • The contents of the header right widget area including a search form and social media follow icons
  • Your site title
  • A logo added to the header image setting in the WordPress customizer

Here’s an example showing the full width header background image with a search box in the header right widget area:

The 2nd example shows the site title and search box:

The 3rd example displays the logo image added via the customizer.

The tutorial also includes the following sample CSS to:

  1. Position the search form in the header right widget area
  2. Position the site title
  3. Position the header image
/* Search Form */
.header-widget-area .search-form {
    margin-right: 20px;
}

/* Text Title */
.title-area {
    padding-left: 20px;
    padding-top: 16px;
}

/* Header Image */
.header-image .site-title {
    padding-left: 20px;
    padding-top: 16px;
}

You’ll also find code to:

  • Remove the Site Title & Description
  • Remove the Header Image upload setting from the WordPress customizer

Demo Video

The demo video shows you how you can change the background image, display a logo image which floats over the header background image or display your site title over the image. Any widget added to the header right widget area also displays over the header image.

Here’s the code to add your full width header image:

Register for full access

Related Tutorials

  • Metro Pro – Image Behind Header & Menu
  • Full Screen Width Header Image In Metro Pro

Header Image Metro Pro Theme

Reader Interactions

Comments

  1. Nick Gersbach says

    June 2, 2019 at 2:57 pm

    How do you add files to already created folders in the theme editor? You should be explaining each step in detail if you are going to charge $50 for some code snippets. I shouldn’t have to jump through more hoops in order to follow your instructions.

    Log in to Reply
    • Brad Dalton says

      June 2, 2019 at 3:08 pm

      Nick, please use FTP with a code editor or File Manager to upload files/folders.

      The theme editor does not allow upload of files/folders and should not be used to edit files.

      Installation support is included in membership at no extra cost meaning you can send FTP hostname, username and password as well as WordPress login details and we will install the code for you.

      Log in to Reply
  2. Cheryl Smith says

    April 5, 2019 at 1:18 pm

    I followed everything and the image was still not responsive. I found another way to deal with the issue.

    Log in to Reply
    • Brad Dalton says

      April 7, 2019 at 10:12 pm

      What width isn’t it responsive? Link to the live site please.

      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.