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.
Testing
The code has been tested using the Genesis Sample child theme by StudioPress. 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.
Code Installation
There’s 3 steps :
Related Tutorials
- Different Sized Header Image On Mobiles Using Infinity Pro
- Outreach Pro – Different Logo For Desktop and Mobile
- Special Mobile Image After Header At Any Screen Width
- Different Sized Header Images For Any Screen Width – Mobile Responsive
- Display Different Sized Header Images On Different Mobile Devices
Leave a Reply
You must be logged in to post a comment.