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.

Sticky Header and Menu In Mai Chic Pro Theme for Genesis

This code makes your site header and nav menu sticky on scroll. It also centers your site header elements and nav menu items on desktops as

Random Header Hero Images In Essence Pro

This code modification to the Essence Pro child themes enables you to display random header hero images every time the page loads. Demo

Image Behind Header In Breakthrough Pro

The code in this download folder adds a hero image behind all site header elements in the Breakthrough Pro for Genesis. The image can be

Logo Inline With Mobile Menu In Genesis Child Themes

You can add this CSS to the end of your Genesis child themes style.css file to move your mobile menu inline with your custom logo or site

Change Custom Header Image On Mobiles In Gallery Pro

The solution in this download folder enables you to display a custom header image on smaller screens. As seen in the demo video, your

Essence Pro Fixed Header

The solution in this download folder enables you to make the site header in your Essence Pro theme sticky. To do this, the color of the

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

This tutorial provides the code which enables you to display a unique hero image with unique overlaying text on any page/post using the

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