Responsive Full Width Header in News Pro Theme

[TheresaSh]

I have a major problem - I posted this in response to someone else's similar problem but thought if I listed the problems and solutions here it might help or at least further everyone so people don't waste time looking for the same solution over and over - I don't have a solution yet. If you have one let me know.

There is definitely a problem with making the header and footer responsive? It says the theme is responsive? If you get an answer to your query let me know - it seems we all get referred to the same experts with mixed results - for instance have you tried:
http://prettydarncute.com/2013/10/genesis-full-width-header-tutorial/
http://thepixelista.com/responsive-genesis-child-theme-logo/
http://keypresswp.com/getting-your-head-around-header-images/
http://designsbynickthegeek.com/plugins/genesis-responsive-header-customizer-update
http://wpsites.net/web-design/custom-header-image-genesis/

I happen to be using the news pro theme and still no success with this

I am going to post it where I see news pro theme and see if I can get an expert coder as the lack of ability to change from a logo to a header on these themes is driving me nuts!!

http://www.bestbabymonitorchoice.com

[Erik D. Slater]

I actually solved this very issue for someone else on the Copyblogger forums (i.e. not here on StudioPress).

I'm a little lacking in time at this very moment ... but here is the code for functions.php to get you started, along with some explanations in comments:

// Modify "custom header" image for fully-scalable browser/mobile responsive behaviour
add_filter('genesis_seo_title', 'eds_genesis_seo_title', 10, 3);
function eds_genesis_seo_title($title, $inside, $wrap)
{
	echo str_replace(
		$inside,
		'<a href="'.get_bloginfo('url').'">'.	// "Site Address (URL)" from Settings -> General
			'<img src="'.get_header_image().'" width="'.get_theme_support('custom-header', 'width').'" height="'.get_theme_support('custom-header', 'height').'" alt="" />'.	// Adds custom header using <img /> rather than CSS definitions
			'<span>'.get_bloginfo('name').'</span>'.	// Adds "Site Title" back in (use CSS on the <span> tag to (1) hide the text from the user, and (2) show the text to the search engines)
		'</a>',
		$title
	);
}

The point of the code above is to make your header use the <img /> tag rather than rely solely on CSS to define your header ... while allowing you to continue using the customizer in your admin dashboard.

Further CSS changes are required. I may have time later on to look into your specific case ... or someone else can pick it up from here ... I'm easy that way 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[TheresaSh]

Hi Erik
Much appreciate your efforts but I don't know how to do it unless everything is specified.
If I just change what you say above I won't be able to make the further CSS changes unless it is specific.

There is nothing peculiar about my case except that I want a full width header with about 250px height and for it to be responsive on any device. I have genesis latest version and news pro latest version installed....fresh install.

Should work with any genesis or child theme?

[TheresaSh]

ps. Erik thanks for the functions php code.
What do I do from there with the style.css
And then how /where do I upload the image for the header?

[Erik D. Slater]

(1) You upload your image via Appearance -> Customize -> Header Image

(2) The code will work as long as the Genesis child theme allows you to upload your image as described in (1) above

(3) It will be responsive ... the <img /> tag accommodates responsive behaviour by design

Unless someone gets there before me, I'll figure out your CSS stuff later on (since I have a client meeting in a few minutes). This is just a quick follow-up to hopefully allow you to move forward a little bit 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[TheresaSh]

Thanks Erik
Appreciate the time you have already given...
Will await your return!!
I'll put the code in functions.php and upload the header.
Then wait for you...

Theresa

[Erik D. Slater]

So I just had a quick looksy at your site ... and I see you've got things working 🙂

If you don't want the large spacing under the header on devices with narrower widths, you can remove min-height: 250px; from the following lines in your style.css file:
- 1094
- 1089
- 1097

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[loribivens]

This seems straight forward, but I'm such a newbie! Do you add the code in the function.php after the section that says:
(or before or in place of? I've tried all of these options and I must be missing something.....) Thank you for your help!!

//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 90,
'width' => 260,
) );

[Erik D. Slater]

@loribivens: Nope. Unfortunately, that's the standard method that uses CSS only ... which doesn't give the required result here. My proposed solution works together with the custom header support method, i.e. it doesn't (and is not meant to) replace it.

@theresash has already implemented my proposal (see here) ... although she hasn't confirmed that she's happy with it. She could be suffering in silence ... muttering various expletives under her breath 🙂

If you have some troubles then feel free to open new thread so that someone can help. Different people have different versions of the same problems 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[TheresaSh]

I updated Genesis and was not thinking of the myriad problems I had had previously getting the theme to be responsive - whole website is to left on my iphone? What can I do - hopefully in 1 year there is a remedy for this situation that does not involve countless hours of work or buying more stuff.

[TheresaSh]

ps. here's my site - check it out on your iphone...? responsive works on desktop and laptop?

http://www.bestchefknivesontheweb.com

[Erik D. Slater]

TheresaSh: You've got the following line in your footer:
<p style="text-align: center;">___________________________________________________________</p>

This is causing issues with responsive behaviours for widths of 523px and lower.

As a replacement, you could do something like:
<p style="border-top:1px solid #000;margin:15px auto 10px;"></p>

For best practices, you should replace the "style" part with a "class" ... then move it from your HTML to your style.css file.

For now though, give this a go and see if this helps 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[TheresaSh]

Hi Eric,
I don't know how to move this to style.css
Worked like a charm though just with html code. If you could tell me how to put this in style.css it would be appreciated. I'm not that advanced.

[Author]

Posts