WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Magazine Pro Full Screen Width Responsive Header Image

This tutorial provides the code which enables you to add a full width image to the Magazine Pro themes site header.

Based on this question from a member of the StudioPress community forums :

I’ve searched for a way to create full-width header on Magazine Pro, but lots of different advice and nightmare crash stories. Is there a plugin to create full width responsive headers? If not, what’s the best way to tweak the code to over-ride the settings?

Here’s the demo video showing exactly what the code does :

Video Demo

The video shows the full width responsive header image added to the header area of the Magazine Pro child theme by StudioPress.

Code Installation

There’s 3 steps :

Step 1 : Copy the PHP code from the functions.php file in the download folder below to the end of the Magazine Pro themes functions.php file.

Step 2 : Add your full width header image to the Magazine Pro themes images folder and name it header.png

Register for full access

Reader Interactions

Comments

  1. This is great – I really like the Magazine Pro theme but wanted a full width header. I made these changes and added my header (940 x 150 pixels), It does indeed display my header but the top and bottom are cut off. What size header should I be using? Is there any way to changer the supported header size to 940 x 150 pixels?

    • Hi Dan. You might need to change the height under the site header section of your style.css file.

      Try this CSS rule on line 1423. Based on my testing this controls the height.

      .header-image .site-title a {
	background-position: center !important;
	background-size: contain !important;
	float: left;
	display: block;
	min-height: 500px;
	text-indent: -9999px;
	width: 100%;
}

      The image needs to be very wide as it needs to display full screen width on large desktops like Max Pro etc. I would use something like 2000px width.

      Link to your site please.

Leave a Reply