Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Full Width Header in News Pro Theme
- This topic has 12 replies, 3 voices, and was last updated 8 years, 10 months ago by
TheresaSh.
-
AuthorPosts
-
June 5, 2015 at 12:36 pm #155013
TheresaSh
MemberI 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/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.comJune 5, 2015 at 12:56 pm #155015Erik D. Slater
MemberI 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 • LinkedInJune 5, 2015 at 3:15 pm #155025TheresaSh
MemberHi 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?
June 5, 2015 at 3:18 pm #155027TheresaSh
Memberps. 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?June 5, 2015 at 3:47 pm #155030Erik D. Slater
Member(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 designUnless 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 • LinkedInJune 5, 2015 at 3:51 pm #155031TheresaSh
MemberThanks 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
June 5, 2015 at 5:42 pm #155041Erik D. Slater
MemberSo 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 • LinkedInJune 8, 2015 at 10:25 pm #155488loribivens
MemberThis 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,
) );June 8, 2015 at 10:36 pm #155489Erik D. Slater
Member@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 • LinkedInMarch 29, 2016 at 2:02 pm #182481TheresaSh
MemberI 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.
March 29, 2016 at 2:03 pm #182482TheresaSh
Memberps. here's my site - check it out on your iphone...? responsive works on desktop and laptop?
March 29, 2016 at 3:56 pm #182487Erik D. Slater
MemberTheresaSh: 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 • LinkedInApril 1, 2016 at 1:01 am #182624TheresaSh
MemberHi 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. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.