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:
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 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:
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
Using the Only Menu Type
Edit the Header Text
The header text is the text you see over the image, including the button.
This next tutorial for your header will tackle the title, sub-title, and button.
- Go to Appearance >> Customize >> Header Area >> Header Text
- From here, you can go down the list of options and settings to customize the look and style of your header text
- 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
Centered Menu
Menu Style - Sticky
- Go to Appearance >> Customize >> Header Area >> Menu Style
- Look for the “Sticky Menu” setting and make your choice
- Click “Save & Publish“
Menu Style
- Go to Appearance >> Customize >> Header Area >> Menu Style
- Look for the “Menu Style” setting and make your choice
- 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
Mobile Header Image - Alternate Size
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.
- Go to Appearance >> Customize >> Header Area >> Header Image
- Look for the “Current Header” setting and then to remove the default image, click on “Add New Image” to upload a new one.
- 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.
- Go to Appearance >> Customize >> Header Area >> Header Image
- Look for the “Mobile Screen Header Image” setting and then change the image to your own by clicking on “Add New Image“
- 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.
- Go to Appearance >> Customize >> Header Area >> Header Image
- 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).
- 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).
- 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.
- Go to Appearance >> Customize >> Header Area >> Header Image
- Look for the “Header Shortcode” setting and enter your shortcode into the text field
- Click “Save & Publish“