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.

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 both

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

2 Ways To Show Custom Header Images On Each WooCommerce Product Category Page

These solutions let you add a custom image for your logo to any WooCommerce product category page. If none added, a default named

Logo Over Full Width Header Image

This solution enables you to add a full width background image which covers the entire site header container. And, you can also addd a logo

Add 3 Images Inline Below The Header Image In The Title Area

This tutorial provides the code which enables you to add 3 images below your default header image ( logo ) in Genesis like this : On

Replace Logo With Site Title On Scroll

This solution enables you to remove your header image and replace it with the site title & description when you scroll down like you see

Template For Custom Logo & Different Menu

This page template enables you to display a different header image ( logo ) as well as a different menu on any page you select the

Set Header Image For Different Pages

The code in this tutorial enables you to set a different header image based on any condition(s). In this example, the code displays a

Full Width Responsive Blog Page Header Image

This code enables you to add a full width header image to your blog page. You can set a default in the code which uses a image named

Change Logo On Mobiles When Genesis Responsive Menu Toggled

The code in this tutorial enables you to display a different header image when the responsive hamburger menu icon is toggled open. Here's

Site Title & Description Before Header Image In Genesis

The solution in this tutorial displays your site title, your site description and then your header image like you see in the following