• 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

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

Header Image Magazine Pro Theme

Reader Interactions

Comments

  1. Dan Roberts says

    August 19, 2017 at 4:18 am

    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?

    Log in to Reply
    • Brad Dalton says

      August 19, 2017 at 1:49 pm

      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.

      Log in to Reply
      • Dan Roberts says

        August 19, 2017 at 4:41 pm

        Thanks – I tried that but it’s still getting cut off. the site is http://losmarketer.com. you can see the full header at http://dannyscotts.com

        Dan Roberts

        Log in to Reply
        • Brad Dalton says

          August 19, 2017 at 4:46 pm

          How many js files did you upload? Also, please send me login details.

          Log in to Reply

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.