Genesis Responsive Header plugin not working with Prose

[cindyjw]

I'm thrilled to find a plugin to help the responsiveness of my header. I uploaded the proper header sizes requested by the plugin. However, when I look at my site on mobile, the header doesn't show up correctly. Just a bit of the top shows. Please help!

http://theessentialhomemaker.com

Here is a screenshot: http://screencast.com/t/4aC5jYwtpIq

http://theessentialhomemaker.com

[eamonmoriarty]

The Genesis Responsive Header has not been updated to work with HTML5 Themes. So if yours is HTML5 it won't work.

---

Eamon Moriarty
EM Dzine

[RKBlake]

I got Prose to use responsive headers by uploading 4 images for 768, 480, 320, 240 to my Media Library. Then I added the code below to Geneisis Theme Settings -> Header and Footer Scripts under Header.

You'll need to edit the code below to change the url of each image to reflect your domain/url.

No editing of functions.php or custom.css, or style.css, and no plugins either...

<style type="text/css">@media only screen and (max-width: 768px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader768.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:98px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 480px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader480.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:61px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 320px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader320.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:41px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 240px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader240.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:31px!important; } #title, #title a { background: none !important; } }</style>

Hope that helps.

[Author]

Posts