WordPress.org

Forums

Twenty Thirteen
[resolved] Header image isn't responsive (28 posts)

  1. cadfile
    Member
    Posted 1 year ago #

    I want to convert my child theme to use Twenty Thirteen as a base but I noticed that the header image isn't responsive to screen size as rest of page is.

    I understand the developers still think of the header as background art but some like me use it the old school way for a fancy title image for my blog.

    It would be real nice to have away for the header image to scale like the one in Twenty Twelve did.

    Any suggestions or plugins that will do that?

  2. David Borrink
    Member
    Posted 1 year ago #

    That was my first thought after observing the new default theme. I'm asking, too. How would we create responsive header graphics? I certainly don't want the central 20% of the header to be the main focus of my header if it's on a phone at 320px wide. The remaining 80% becomes unseen. Only wider screens truly see it all.

  3. Zulfikar Nore
    Member
    Posted 1 year ago #

    If you want to have a go at hacking this then here's something to get you started.

    Create a child theme as per the guidelines here: http://codex.wordpress.org/Child_Themes

    Add a folder in called inc and copy over the custom-header.php

    Create a functions.php and include the custom-header.php as follow.

    require get_stylesheet_directory() . '/inc/custom-header.php';

    Edit custom-header.php @ line 99 where it reads background-size: 1600 auto; replace with background-size: 100% 100%;

    Then after the closing } @ line 100 add the following CSS properties

    @media (max-width: 643px) {
    	.site-header {
    	    background-size: 100% 60%;
    	}
    }

    At this point if you activate your child theme you should have a somewhat responsive header.

    You'll have to tweak the @media properties to suit your need and add in different breakpoints in the same manner.

    For a demo see: http://wpchildthemes.info/2013flexheader/
    You can also download the child theme from there.

    Enjoy :)
    Zulf

  4. cadfile
    Member
    Posted 1 year ago #

    That is one way to do it but seems not to address the way 2012 handled it. Here is how 2012 handled the header image:

    <?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>

    Then in css "header-image" class was under the media section with width 100% and height auto

    So I'll try to either make the current code work or hack it back to how 2012 did it.

  5. Zulfikar Nore
    Member
    Posted 1 year ago #

    The problem there with width: 100% height: auto; is that the image get reduced much faster where else with background-size: 100% 100%; you have full control over the reduction ratio using @media parameters.

    Besides, you'll need to strip out the styles from the custom-header.php as they a fired after the style.css and will always override your styles if left in.

    I think that's a bit too much work when you already have the function working for you and all you need do is tweak and extend :)

    Do let us know how it goes though as all avenues must be considered in order to get the best results :)

  6. cadfile
    Member
    Posted 1 year ago #

    I tried the function route and got the "can't re-declare function" error and don't know enough to get around that.

    I'm not looking for a pretty solution just a functional one for now so I ended up just doing a basic css line:

    .site-header {
    	background-size: 100% auto !important;
    }

    That did work while not having to change a core file which I would have done if the css didn't work.

    I want the image to reduce as the screen reduces I could probably do the 100% auto in a media call but until I learn it this will have to do.

  7. Zulfikar Nore
    Member
    Posted 1 year ago #

    Oh OK, that's understandable :)

    I perhaps should have mentioned the need to rename the function but neglected that and assumed everyone will know - silly mistakes we developers make.

    I'll probably go play with this a bit more and see how it all pans out but I'm still hopeful that the team will sort it out so that we don't have to hack anything :)

  8. bline007
    Member
    Posted 1 year ago #

    I am stuck with this. While adding

    .site-header {
    background-size: 100% auto !important;
    }

    works to make it responsive it adds a huge amount of space on the mobile phone under the image.

  9. cadfile
    Member
    Posted 1 year ago #

    I ended up making that element:

    .site-header {
    background-size: 100% 100% !important;
    }

    Making the height 100% seems to reduce the space at the bottom more than set at auto. On my child theme there was no space between the header image and the nav bar with both set for 100%

    There will be some overlap where the nav bar overlaps the bottom of the header image by a few pxs but nothing you can't fix by editing the header image

  10. tobbe_l
    Member
    Posted 1 year ago #

    Hi!
    Feel like a mooch here begging for assistance but anyway:
    I´m not that good att coding and would really like to make the header on my twentythirteen themed blogg responsive.

    I would much appreciate if you gyus could help me with some more specific or ready coding samples and what to put where in the WP-installation.

    Please?

  11. medvp3d
    Member
    Posted 1 year ago #

    Hi

    Zulfikar, I also dont know what you mean by renaming the function. What do you mean by that? I'm also getting the "can't re-declare function" error that CADFILE got...

  12. medvp3d
    Member
    Posted 1 year ago #

    OK Nevermind I figured out the renaming of the functions. In the custom header file you just have to rename all the functions. Did that, but don't see a change in my site.

    Also, since it's the same topic, is it fine that I'm posting here? I don't see the point in starting my own thread if it is the same topic?

  13. Zulfikar Nore
    Member
    Posted 1 year ago #

    It would be ideal to start a new topic as this one has been marked as resolved and therefore won't get much attention from willing helpers :)

  14. anyates25
    Member
    Posted 1 year ago #

    i have 2013 with child already created. my header is a picture of me and my partner on the right side with words and opt in form on left. (see http://www.amberandsteph.com) on laptop looks fine. on a tablet/mobile it cuts me off but if i add a mobile responsive plugin it totally takes header off. i must have opt in form and image showing on mobile/tablet. do i just add code below to my child's style.css fine?:

    .site-header {
    background-size: 100% 100% !important;
    }

    i don't want to take chances with coding the functions.php as i recently caused the "white screen of death" and had to hire someone to fix it for me.

    when viewing on mobile/tablet, i want it to look like this person's site http://www.marieforleo.com

  15. cadfile
    Member
    Posted 1 year ago #

    Yes add the code yo your child theme's css file. You won't get the white screen of death if you mess up.

    I'm not sure how your opt-in form will act since it is an overlay (not part of the image).

    Sounds like you might want to look into having a separate theme for mobile screens rather than squeezing your desktop version into a small screen.

  16. anyates25
    Member
    Posted 1 year ago #

    I pasted this at the bottom of the child's css and nothing happened.

    .site-header {
    background-size: 100% 100% !important;
    }

    any other suggestions?

  17. cadfile
    Member
    Posted 1 year ago #

    I looked at your css file at http://amberandsteph.com/wp-content/themes/twentythirteen-child/style.css and didn't see the code. Did you save the file back when you added it?

    When I added the code using Firebug it worked for me.

  18. anyates25
    Member
    Posted 1 year ago #

    I went back in and deleted it after it didn't work. Does is take time or is it immediate?

  19. anyates25
    Member
    Posted 1 year ago #

    I just put it back in, still no change so far

  20. cadfile
    Member
    Posted 1 year ago #

    I did notice you have an inline style section for your background photo http://amberandsteph.com/wp-content/uploads/2014/02/assitebanner121.jpg - it isn't in your child theme css file.

    It has the selector: twentythirteen-header-css

    Try to add that to the code

    .site-header .twentythirteen-header-css {
    background-size: 100% 100% !important;
    }

    See what that does

  21. cadfile
    Member
    Posted 1 year ago #

    You have a complicated header because of the form element.

    Try adding the site header code to the css file your form7 plugin uses. The issue doing that is when the plugin gets updated you will have to add the code back to the file each time:

    .site-header {
    background-size: 100% 100% !important;
    }

    Add to /wp-content/plugins/contact-form-7/includes/css/styles.css

    It it still doesn't work then you will need to edit your header file that has this code in it:

    <style type="text/css" id="twentythirteen-header-css">
    .site-header {
    background: url(http://amberandsteph.com/wp-content/uploads/2014/02/assitebanner121.jpg) no-repeat scroll top;
    background-size: 1800px auto;
    }
    .site-title,
    .site-description {
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    }
    </style>

    Where you see the background-size: selector you would need to change the numbers to 100% 100% !important instead of the 1800px auto;

    Try adding the code to the form css first

  22. anyates25
    Member
    Posted 1 year ago #

    i can't find:
    /wp-content/plugins/contact-form-7/includes/css/styles.css

    i went to contact form 7 plugin editor and all files are php.

    that form on header is a mailchimp optin (currently non-functioning) not sure if that makes a difference.

    anyway, i went to my child's theme file funtions.php (the scary place i went last times and crashed my site! :P) and found:

    <style type="text/css" id="twentythirteen-admin-header-css">
    .appearance_page_custom-header #headimg {
    border: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    <?php
    if ( ! empty( $header_image ) ) {
    echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
    ____________________________________________

    Then I found the image (assitebanner121) in my header.php file of child theme. here is the file:

    * Displays all of the <head> section and everything up till <div id="main">
    *
    * @package WordPress
    * @subpackage Twenty_Thirteen
    * @since Twenty Thirteen 1.0
    */
    ?><!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8) ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>

    <?php if (!is_front_page()): ?>
    <style type="text/css">
    .site-header {
    background-image: url(/wp-content/themes/twentythirteen-child/images/assitebanner121-slate.jpg);
    }
    </style>
    <?php endif; ?>
    </head>

    <body <?php body_class(); ?>>

    <div style="background: rgba(255, 255, 255, 0.25);z-index:5; width:100%; height:50px; position:relative;">
    <div style="width:335px; height:50px; position:absolute; left: 8.75%; top: 1px; ">
    <?php if (is_front_page()): ?>
    <img src="http://amberandsteph.com/wp-content/uploads/2014/04/AMBERSTEPHPNG125hearts2.png" alt="Amber & Steph" height="60px" width="105%">
    <?php else: ?>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/AmberAndSteph-slate.png" alt="Amber & Steph" height="35px" width="100%">
    <?php endif; ?>
    </div>

    <div id="theresmore" style="top: 0px; position: absolute; left: 57%; float: right;">
    <?php if (is_front_page()): ?>
    <img src="http://amberandsteph.com/wp-content/uploads/2014/04/somethingmorecordia125.png" width="75%" height="55" alt="Raising Consciousness" height="30px">
    <?php else: ?>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/TheresMore-slate.png" alt="Raising Consciousness" height="30px">
    <?php endif; ?>
    </div>
    </div>

    <div id="page" class="hfeed site">

    <header id="masthead" class="site-header" role="banner">

    " title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    <?php echo do_shortcode('[contact-form-7 id="50" title="Contact"]') ?>
    </header>
    <div id="navbar" class="navbar" style="background-color: #ffffff;">
    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>

    Not sure where to change since it doesn't look exactly like you said and I have much fear of crashing my site again. :) Thanks a million!

  23. cadfile
    Member
    Posted 1 year ago #

    When you are using the plugin editor in the admin, look on the right side of the screen and the list of files. The one you need will be listed as "contact-form-7/includes/css/styles.css"

    I don't have the plugin myself but the ones I have that do have css files show up in my plugin file listing in the editor

    The other item about changing the header file:

    if ( ! empty( $header_image ) ) {
    echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';

    It should say background-size: 1800px auto; - but you should still edit to background-size: 100% 100%;

    Again really try to add the code to the form css file first before you edit the function file

    The items I mentioned have to be there because I got the info from viewing the page source and using Firebug

  24. anyates25
    Member
    Posted 1 year ago #

    so you are saying i should change this:

    if ( ! empty( $header_image ) ) {
    echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';

    to this: (what will this do?

    if ( ! empty( $header_image ) ) {
    echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1800px auto;

    but to get the image to be mobile responsive change it to this:

    if ( ! empty( $header_image ) ) {
    echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 100% 100%;
    _____________________________________________________

    this is all in my child's functions.php file. if i make this change i'm not gonna cause any problems am i?

    also, i went to plugin editor and all files were php. no css. :/

  25. cadfile
    Member
    Posted 1 year ago #

    That's why it is better to edit CSS files instead of function files because if you make mistake with the CSS the worst that will happen is the code will be ignored.

    Do you have any other way to edit that "contact-form-7/includes/css/styles.css"? I use Filezilla and a text editor instead of the editor in the admin. Do you have access to the file manager on your webhost control panel - you can use it to edit the file.

    If you can't find a way to edit the contact form css then make the change to the code in the function file.

    Just change the 1600px auto in background-size to 100% 100%

  26. tigerlily55
    Member
    Posted 1 year ago #

    I wasn't able to get the coding suggestions made here to work for my site (they made the header look strange, either with too much space as mentioned above, or with a stretched image).

    I tried a number of additional code-based suggestions to get a responsive header from other threads as well, also with no luck. Finally, I ended up replacing the header image with a responsive image slider widget. This worked well, and ultimately was easier.

    Here's what to do:

    1. Remove header image

    2. Install and activate an image slider plugin. I used
    "ResponsiveSlider". "Easing Slider Lite" should also work.

    3. Add your header image as a slide, and set the appropriate size dimensions.

    4. Put the appropriate code in the header.php file (see the plugin documentation to get the code) where you want it to appear on your website. I put the code right in between the header-related code and the body-related code.

    Done!

  27. Northwoods Creative
    Member
    Posted 1 year ago #

    All I did was add this CSS to my Jetpack CSS editor and it worked fine.

    /* Header Responsive */
    .site-header {
    	background-size: 100% 84% !important;
    }
  28. Marc Decroux
    Member
    Posted 1 year ago #

    Hi jmeyer2485!

    I try your solution: works pretty fine for having my navigation bar stiucked to my header image. But the image is not correctly responsive: the height is not resizing correctly!

    Any idea?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic