The code in this tutorial enables you to display a different header image when the responsive hamburger menu icon is toggled open.
Here’s the demo :
How It Works
The solution assumes you have added your logo to the header image setting in the customizer. This image is used as the default. You also need to add a different header image named custom.png to your child themes images folder.
The custom image is only displayed when the responsive menu icon is clicked and the menu expanded. The screen width is also set to less than 1023px so the default image is displayed when the width is greater than 1023px width.
The code has been tested using the Genesis Sample child theme by StudioPress and the Foodie Pro child theme by Feast Design Co. When using the code in Foodie Pro, the custom.png image should be 320px width x 170px height. For usage in Genesis Sample, make sure custom.png is 300 x 80.
There’s 3 steps :