WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. 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.

    • 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.

Leave a Reply