If you’re a fan of the Genesis framework, you’re most likely going to modify your logo for your masthead. There’s also a very good chance your new logo will be wider than what is best for cell phone screens. If you test the page in a responsivetest.net you’ll notice that the logo is cut off. Fixing it is a bit of a pain and it seems to be easier to look for a plugin solution. Nick the Geek developed a fantastic plugin called the Genesis Responsive Header. Before downloading it please read the following.
Finding The Genesis Responsive Header Plugin In The WordPress Admin Panel
Did you install it? Did you find it after the install? It took me so long to find it I almost gave up. Nick the Geek’s instructions on one of his posts states when you install the Genesis Responsive Header plugin, the plugin’s settings button can be found as a sub choice under the Genesis link in the administration panel.
It’s simply not true. The plugin can be found in Appearance > Themes > Custom. Then click “Responsive Header.”
Is it Safe?
If you’re thinking that this plugin is dangerous because its not listed in the WordPress Plugin Directory, don’t worry. Nick the Geek is respected in the industry. His blog posts have so many comments it’ll take you 15 minutes to read them. Also if you read the forums at Studiopress.com and you do a search for “logo is not responsive” you’ll notice that the senior programmers refer to this plugin constantly.
That’s it. I hope you gain from this info.
Have a great rest of the day, fellow designer person.
I just learned that the plugin does not work with HTML5 Themes.
This simple task is turning out to be a rabbit hole. I’m going attack this tutorial to see how it goes.
THE FINAL SOLUTION – updated 10/31/17
The reason why this plugin has not been updated and the reason why nobody cares about it is because there no need to use it. Take the following steps and you will learn how to modify your logo.
- Create you logo in photoshop. Make a note of how tall and wide it is in pixels.
- Make sure the background has been removed and save it as a PNG24
- visit tinypng.com and compress you newly created logo file
- Save the logo to your downloads file. Name it logo.png
- Log into your WordPress admin panel
- go to Appearance > Editor
- Open up the functions.php file
- Look for the code under this note // Add support for custom header
- Change the width and height to match your new logo file
- Hit save
- Now click appearance > Customize
- Click header image
- Select your image or upload it in the next screen
- It will ask you to crop the image make sure the crop includes entire image and hit save.
- Check the logo on the front end. If the logo is not in the right position you’ll have to modify the CSS.