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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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 desktops.

On mobiles, the images will scale down to fit the size of the site header without leaving any space.

Desktop site header images

This way your images won’t be cut off on smaller mobile screens as seen in the following demo video.

Demo Video #

Shows the header image ( logo ) & image in the header right widget area displaying with equal height on desktops and scaling down to fit mobile screens without cutting off any part of the image.

This solution has been written to work with the Enterprise Pro child theme by StudioPress however the method used will work in any theme.

Installation Steps #

There’s 2 steps :

Step 1 – You’ll find the following code between lines 39 – 44 in functions.php. In this example, the values for the height & width have been set at 150px by 300px as seen in the following code example :

Step 2 – Paste the CSS from style.css to the end of your Enterprise Pro child themes style sheet and clear caching.

Download Folder

CSS Grid Columns Enterprise 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.