WP SITES

Log in

Magazine Pro Full Screen Width Responsive Header Image

—

by

Brad Dalton

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

Related Tutorials

Comments

18 responses to “Magazine Pro Full Screen Width Responsive Header Image”

  1. Gil Avatar
    Gil

    Hi Brad,

    I purchased this a while back and I need to make some changes to the site header.

    I will need to target it in CSS. I tried the code above but it does not work for me.

    Site is: https://fghgs.ca/

    The flowers at the top will be replaced with a 2000 x 250 or 2000 x 300 new image.

    Don’t mind the mess here. Too many cooks in the kitchen LOL

    Thanks and cheers,
    Gil

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Gil. Happy to write you a custom tutorial however you will need to signup for 1 month. https://wpsites.net/no-access/

      1. Gil Avatar
        Gil

        Hi Brad,

        I already purchased this from you and others as well…..

        1. Brad Dalton Avatar
          Brad Dalton

          Gil. Support is not provided for a lifetime, only for the length of active paid membership like any other product. I never offered lifetime updates and lifetime support.

          1. Gil Namur Avatar
            Gil Namur

            I’ll purchase the 1 month option today/tomorrow.

            I assume that the header will be fully mobile responsive yes?

            Cheers,
            Gil
            P.S. FYI – I am not getting notifications of follow up comments via e-mail. I did click on Notify Me.

          2. Brad Dalton Avatar
            Brad Dalton

            Please send me a copy of your header image to brad@wpsites.net and i’ll test it locally once you become a paid member.

          3. Gil Namur Avatar
            Gil Namur

            Hi Brad,

            Done 🙂

          4. Brad Dalton Avatar
            Brad Dalton

            Thank You. Have you thought about using 2 images? 1 for desktops and another for mobiles.

          5. Gil Namur Avatar
            Gil Namur

            I am open to that idea Brad.

          6. Brad Dalton Avatar
            Brad Dalton

            Ok, please send me an image for mobiles with the same height, 250px and width of 1023px or 840px.

          7. Gil Namur Avatar
            Gil Namur

            Done. Sent 1023 x 250

          8. Brad Dalton Avatar
            Brad Dalton

            Here is the solution https://wpsites.net/genesis-tutorials/full-width-responsive-header-image-always-in-magazine-pro/

            Works with any size header image.

            Remove any code used for other solutions as this is an entirely different solution.

          9. Gil Namur Avatar
            Gil Namur

            Hi Brad,

            Thank you! This works perfectly.

            Appreciate your help!
            Cheers,
            Gil

    2. Gil Avatar
      Gil

      Actually I have now changed the header image. I just need to target it as it is not quite high enough and losing it’s border.

      Thanks!

  2. Dan Roberts Avatar
    Dan Roberts

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      [code]
      .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%;
      }
      [/code]

      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.

      1. Dan Roberts Avatar
        Dan Roberts

        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

        1. Brad Dalton Avatar
          Brad Dalton

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

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.