Title: Responsive header
Last modified: August 30, 2016

---

# Responsive header

 *  Resolved [tajensen](https://wordpress.org/support/users/tajensen/)
 * (@tajensen)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-header-7/)
 * I know this topic has been addressed before, but it is now marked as closed, 
   so I’m opening a new one.
 * In the previous topic that addressed header responsiveness, the following was
   given as a possible solution:
 *     ```
       .custom-header-image {
       background-position: top;
       background-size: 100%;
       background-repeat:no-repeat;
       }
       ```
   
 * However, that leaves a large gap between the header image and the nav bar. I 
   was able to force the theme to display the header as desired by modifying header.
   php in my child theme, but now I lose support from the Theme Options. Please 
   take a look at this link to see how my header currently displays: [dev.sturbridgetimes.com](http://dev.sturbridgetimes.com).
 * Is there a fix that will keep the responsiveness that you see in the link while
   restoring support from the Theme Options?
 * -Tim

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [tajensen](https://wordpress.org/support/users/tajensen/)
 * (@tajensen)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-header-7/#post-6740624)
 * To answer my own question, here’s the solution I came up with:
 * Copy header.php into the child theme and replace this existing code:
 *     ```
       <div class="custom-header-image" style="background-image: url('<?php echo header_image() ?>'); width: <?php echo get_custom_header()->width; ?>px; height: <?php echo get_custom_header()->height ?>px;">
       ```
   
 * with this code:
 *     ```
       <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
       <img src= "<?php echo header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height= "<?php echo get_custom_header()->height; ?>"/>
       </a>
       ```
   
 *  Theme Author [Tim Nicholson](https://wordpress.org/support/users/timnicholson/)
 * (@timnicholson)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/responsive-header-7/#post-6740700)
 * Awesome, thanks for figuring this out and taking the time to post the solution.
   This will be very helpful to people that don’t want the header to be cropped.
 *  [posword](https://wordpress.org/support/users/posword/)
 * (@posword)
 * [10 years ago](https://wordpress.org/support/topic/responsive-header-7/#post-6740709)
 * This didn’t work for me under WordPress 4.2.2. I copied the header.php into the
   child theme and made the change. Now I get both the text header and the header
   image. So I have had to change back to the original file that was in my child
   theme, which contains this:
 *     ```
       // Get custom header image and determine its size
       				if ( get_header_image() ) {
       				?>
       					<h1 class="site-title screen-reader-text"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' )?></a></h1>
       					<h2 class="site-description screen-reader-text"><?php bloginfo( 'description' ); ?></h2>
       					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="custom-header-image" style="background-image: url('<?php echo header_image() ?>'); height: <?php echo get_custom_header()->height ?>px;"></a>
       ```
   
 * But the header image is reduced in size considerably [See site](http://au.peterwade.com/).
 *  [posword](https://wordpress.org/support/users/posword/)
 * (@posword)
 * [10 years ago](https://wordpress.org/support/topic/responsive-header-7/#post-6740710)
 * The actual uploaded header image is 1050 x 116px and it is displaying at 510 
   x 55px.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/flat-bootstrap/1.10.1/screenshot.
   png)
 * Flat Bootstrap
 * [Support Threads](https://wordpress.org/support/theme/flat-bootstrap/)
 * [Active Topics](https://wordpress.org/support/theme/flat-bootstrap/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/flat-bootstrap/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/flat-bootstrap/reviews/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)

 * 4 replies
 * 3 participants
 * Last reply from: [posword](https://wordpress.org/support/users/posword/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/responsive-header-7/#post-6740710)
 * Status: resolved