An introduction to the header area

Receptive offers a header group of settings that includes a variety of features, including a customized version of the default WordPress Header Image feature, but we will go through that later. This tutorial is primarily focused on the top header of your website:

header demo

To get to the header settings, we need to go to the customizer and then to the “Header Area” section. From there we will move into the sub-sections.

header settings1

header area sections

Header Type

Our header type is a setting that will determine the style of header we want to have. Receptive offers two sets, one for the front page and one for the inner site pages:

header type2header type3

The image option uses the WordPress Header Image and sits just behind the logo and menu header background. The shortcode option gives you the choice of using a slider or other forms of media that uses shortcodes. The “only menu” option is self-describing as just being the site title/menu header part. This will also be the same for your inner site header type as well. 

Using the Image Type

header image type

Using the Only Menu Type

header noimage type

Edit the Header Text

The header text is the text you see over the image, including the button. 

header text demo

This next tutorial for your header will tackle the title, sub-title, and button.

  1. Go to Appearance >> Customize >> Header Area >> Header Text
    header text section
  2. From here, you can go down the list of options and settings to customize the look and style of your header text
    header text settings
  3. If everything looks good in your preview window, click “Save & Publish” at the top of the column.

Menu Style

This group of settings will let you choose to have a sticky header and whether you want your menu to be inline or centered.

Inline Menu

menu inline

Centered Menu

menu centered

Menu Style – Sticky

  1. Go to Appearance >> Customize >> Header Area >> Menu Style
    menu style section
  2. Look for the “Sticky Menu” setting and make your choice
    menu sticky setting
  3. Click “Save & Publish

Menu Style 

  1. Go to Appearance >> Customize >> Header Area >> Menu Style
    menu style section
  2. Look for the “Menu Style” setting and make your choice
    menu style setting
  3. Click “Save & Publish

Header Image

When you first install and activate this theme, you will get two default header images loading:

Desktop Header Image – Full Size

header image default

Mobile Header Image – Alternate Size

header image default mobile

Set Your Header Image

You have the choice of using the default image, or you can upload your own….actually, you can upload several. This will be your larger header image, and should be big enough to accommodate large screens and resolutions. For reference, the demo header image is 2560×1000 pixels.

  1. Go to Appearance >> Customize >> Header Area >> Header Image
    header image section
  2. Look for the “Current Header” setting and then to remove the default image, click on “Add New Image” to upload a new one.
    header image setting
  3. Click “Save & Publish

Set Your Header Image for Mobile Viewing

You may be asking why have a secondary header image? The one problem with responsive websites is that images are responsive. If you have a standard header image that is wide for larger screens and then switch to a mobile screen, your image is going to be very small in height because height is relative to the width. The smaller the width, the smaller the height will be while maintaining aspect ratio. When this happens, if you had header text on the image, you end up with very little space for the text, or it will be very very small to read. 

So the solution here is to upload a mobile version of your header image that has a different size, one that is shorter in width but taller in height. So for example, the mobile default image for this theme is 1024×730 pixels.

NOTE This also gives you a smaller file size too for loading in phones.

  1. Go to Appearance >> Customize >> Header Area >> Header Image
    header image section
  2. Look for the “Mobile Screen Header Image” setting and then change the image to your own by clicking on “Add New Image
    header image mobile setting
  3. Click “Save & Publish

Header Image Overlays

The overlay is a layer of shade that sits on top of the image to give it a bit darker look. The other purpose of this is to allow your header text to show up better on images that might have lighter subject matter, so we can edit the opacity/transparency of the overlay.

  1. Go to Appearance >> Customize >> Header Area >> Header Image
    header image section
  2. The first option is the actual header part where the site title/logo and menu are located. The background overlay has a setting for this. Look for the “Site Header Background” setting and move the slider to the left or right and adjust how much transparency you want. The slider moves with increments of 0.1 from 0 (no colour) all the way up to 1 (which is full solid colour).
    setting site header overlay
  3. Look for the “Banner Image Overlay” setting and move the slider to the left or right and watch your preview window grow lighter or darker. The slider moves with increments of 0.1 from 0 (no colour) all the way up to 1 (which is full solid colour).
    header image overlay setting
  4. Click “Save & Publish

Header Image Shortcode 

If you decide to use a slider or other type of media that uses shortcode, you can add shortcode to a special setting.

  1. Go to Appearance >> Customize >> Header Area >> Header Image
    header image section
  2. Look for the “Header Shortcode” setting and enter your shortcode into the text field
    header image shortcode setting
  3. Click “Save & Publish