Header Image

Tutorials for customizing & modifying the Header Image in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members. Note : Not all tutorials relating to the header image tagged in this archive. You will be able to find more by using the search form.

Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this : Tested using the

Menu Logo Menu In Old Versions of Genesis Sample Theme 2.2.4

The code in this download folder creates a menu logo menu in the header of version 2.2.4 of the Genesis Sample theme. Note : This solution

Metro Pro Different Header Image For Mobiles

This code replaces the desktop header image with a smaller mobile version on smaller screens. This way your header image is not cutoff and

Menu Logo Menu For Twenty Nineteen Theme

The solution in this download folder enables you to create a split menu which displays menu logo menu in non Genesis themes. In this case,

Menu Logo Menu Using CSS Grid In Parallax Pro

The solution in this download folder enables you to display the primary menu to the left, the header image in the middle and the secondary

Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme

This download folder contains 3 files which enable you to add a full width hero image behind your site header which also contains your menu

Equal Height Logo & Header Right Widget Content On Desktops

The code in this download folder enables you to display your header image & a image in the header right widget area at equal heights on

Different Sized Header Image On Mobiles Using Infinity Pro

This solution enables you to change the header image on mobiles using the Infinity Pro child theme by StudioPress. This is the image for

Change Logo Size In Customize Header Image

This tutorial shows you how to change the image size in the Beautiful Pro child theme by StudioPress. This is the standard method used in

Remove Image Gradient Conditionally From Essence Pro

This tutorial provides the modified code which enables you to remove the gradient from the header hero image conditionally. In this case,

Menu Logo Menu In Genesis Sample Themes Header

This solution adds left and right menus inline with your custom logo like this : Tested using version 2.10 of the Genesis Sample child

Image Behind Header & Menu In Genesis Sample Theme

This code adds a field to the Customizer enabling you to upload a full width header image. The image displays behind the site header and

Image Behind Header & Menu

The solution in this download folder enables you to : Move the primary menu inside the site header Display a image behind

Replace Default Header Hero With Different Image On Mobiles – Essence Pro

This tutorial provides 2 different ways to change the default header hero image hero-bg.jpg with another image of any size, at any screen

Different Logo For Desktop and Mobile – Outreach Pro

This download folder contains the code which enables you to use a different logo on mobiles to the default image which is only shown on

Full Screen Width Header Image In Metro Pro

This tutorial provides 2 different solutions which enable you to add a full screen width header image to the Metro Pro child theme by

Reduce Site Header Size When Header Image Decreases On Mobile Screens

This solution resizes the site header as the screen width reduces. In some themes like Foodie Pro, the header image is coded to using

Equal Height Inline Header Image & Header Right Widget Banner Image

This tutorial provides the code which makes your header image and a banner image you add to the header right widget area, equal

Add Responsive Header Image In Genesis Sample Theme – Beginners Guide

This beginners guide shows you how to add a full width header image to the new Genesis Sample child theme by StudioPress. Your image will