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
Gil says
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
Brad Dalton says
Hi Gil. Happy to write you a custom tutorial however you will need to signup for 1 month. https://wpsites.net/no-access/
Gil says
Hi Brad,
I already purchased this from you and others as well…..
Brad Dalton says
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.
Gil Namur says
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.
Brad Dalton says
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.
Gil Namur says
Hi Brad,
Done 🙂
Brad Dalton says
Thank You. Have you thought about using 2 images? 1 for desktops and another for mobiles.
Gil Namur says
I am open to that idea Brad.
Brad Dalton says
Ok, please send me an image for mobiles with the same height, 250px and width of 1023px or 840px.
Gil Namur says
Done. Sent 1023 x 250
Brad Dalton says
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.
Gil Namur says
Hi Brad,
Thank you! This works perfectly.
Appreciate your help!
Cheers,
Gil
Gil says
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!
Dan Roberts says
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?
Brad Dalton says
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.
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.
Dan Roberts says
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
Brad Dalton says
How many js files did you upload? Also, please send me login details.