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 desktops.
On top of this, both images are centered so any text in your logo will always display in the center of your header.
Watch the following demo video to see how it works :
Demo Video #
Shows the desktop header image displayed above 600px and the mobile.png image from your images folder displaying on smaller screens.
Code Installation #
There’s 5 steps :
Step 1 – Modify the default PHP between lines 43 – 44 to match the width and height of your desktop logo which is 1140px width by 180px height.
In this example, the desktop logo dimensions match the values set in the above function.
Step 2 – Upload an image named mobile.png to the Outreach Pro themes images folder. The image you add using Customize > Header Image will be displayed on desktops.
Was This Tutorial Helpful?