• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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 header image will resize to fit any type of mobile device and the header image you add via the customizer will display on desktops.

Demo Video

Shows the mobile.png image from the images folder displaying on smaller screens replacing the image added via the customizer.

Tested using the Gallery Pro theme for StudioPress.

Installation Steps

There’s 3 steps :

  1. # Around line 102 – 103 in functions.php, modify the width and height values to match the dimensions of the header image you add via the customize > Header Image setting for your desktop version.
  2.  

  3. # Copy & paste the CSS from the style.css file to the end of your Gallery Pro themes style sheet and clear caching. Make sure the max-height and min-width values match the dimensions of the mobile version of your header image.
  4.  

  5. # Up the mobile version of your header image to your Gallery Pro themes images folder making sure the file name matches Mobile.png which is used in the CSS.
  6.  

Download Folder

Custom Logo Gallery Pro Theme Header Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.