• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive Full Width Header in News Pro Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Full Width Header in News Pro Theme

This topic is: not resolved

Tagged: responsive header; responsive header news pro; custom header size news pro responsive

  • This topic has 12 replies, 3 voices, and was last updated 6 years, 2 months ago by TheresaSh.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 5, 2015 at 12:36 pm #155013
    TheresaSh
    Member

    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
    June 5, 2015 at 12:56 pm #155015
    Erik D. Slater
    Member

    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
    June 5, 2015 at 3:15 pm #155025
    TheresaSh
    Member

    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?

    June 5, 2015 at 3:18 pm #155027
    TheresaSh
    Member

    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?

    June 5, 2015 at 3:47 pm #155030
    Erik 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 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
    June 5, 2015 at 3:51 pm #155031
    TheresaSh
    Member

    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

    June 5, 2015 at 5:42 pm #155041
    Erik D. Slater
    Member

    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
    June 8, 2015 at 10:25 pm #155488
    loribivens
    Member

    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,
    ) );

    June 8, 2015 at 10:36 pm #155489
    Erik 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 • LinkedIn
    March 29, 2016 at 2:02 pm #182481
    TheresaSh
    Member

    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.

    March 29, 2016 at 2:03 pm #182482
    TheresaSh
    Member

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

    http://www.bestchefknivesontheweb.com

    March 29, 2016 at 3:56 pm #182487
    Erik D. Slater
    Member

    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
    April 1, 2016 at 1:01 am #182624
    TheresaSh
    Member

    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
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble