Title: How to decrease the header image width
Last modified: August 22, 2016

---

# How to decrease the header image width

 *  Resolved [Scart91](https://wordpress.org/support/users/scart91/)
 * (@scart91)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/)
 * Hi, I’m having trouble with the header image sizing.
 * I’d like to be able to decrease the max width as currently it’s far too wide 
   and ideally I’d like it to match the width of the contents window.
 * Website can be seen here: [http://gandmrecruitment.com/](http://gandmrecruitment.com/)
 * Any help would be very appreciated!

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

 *  [Steve](https://wordpress.org/support/users/seekerabroad/)
 * (@seekerabroad)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844182)
 * Hi,
 * Did you want to decrease the menu bar as well?
 * Regards,
 * Steve.
 *  Theme Author [cats_456](https://wordpress.org/support/users/cats_456/)
 * (@cats_456)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844187)
 * Hello Scart91! You can create a child theme and set width in the child style.
   css to any size:
 *     ```
       .header-wrapper {
          max-width:
          margin-left: auto;
          margin-right:auto;
       }
       ```
   
 * Also you would redeclare jolene_setup function with new size for the header image
   in the child theme.
 *  Thread Starter [Scart91](https://wordpress.org/support/users/scart91/)
 * (@scart91)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844189)
 * Thanks for the help! I would also like to decrease the menu bar too if possible.
 *  Thread Starter [Scart91](https://wordpress.org/support/users/scart91/)
 * (@scart91)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844197)
 * Also sorry cats_456, but I’m quite new at this. Could you possibly list all the
   steps to create a child theme etc?
 *  [Steve](https://wordpress.org/support/users/seekerabroad/)
 * (@seekerabroad)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844203)
 * I see your getting help.
 * You should ask the author about the header box shadow too, as it doesn’t match
   the one around the content box.
 *  Theme Author [cats_456](https://wordpress.org/support/users/cats_456/)
 * (@cats_456)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844282)
 * Scart91, you can find the guide to child themes at this loacation: [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/Child_Themes)
 * this is a css to put into style.css:
 *     ```
       #top-navigation,
       .img-container {
          margin-right: auto;
          margin-left: auto;
       }
   
       .img-container {
          max-width: 890px;
       }
   
       #top-navigation {
          max-width: 810px;
       }
       ```
   
 * > header box shadow
 * exactly, this shadow should be fixed.
 *  Thread Starter [Scart91](https://wordpress.org/support/users/scart91/)
 * (@scart91)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844331)
 * I’ve finally figured out how to access the wp-content files of the site to make
   the child theme.
 * I’ve followed the instructions and created the folder in wp-content where the
   original theme directory is too.
 * My style.css doc is as follows:
 * /*
    Theme Name: Jolene Child Theme URI: [http://gandmrecruitment.com/wp-content/themes/jolene](http://gandmrecruitment.com/wp-content/themes/jolene)
   Description: Jolene Child Theme Author: John Does Author URI: [http://gandmrecruitment.com/wp-content/themes/](http://gandmrecruitment.com/wp-content/themes/)
   Template: jolene Version: 0.0.1 License: GNU General Public License v2 or later
   License URI: [http://www.gnu.org/licenses/gpl-2.0.html](http://www.gnu.org/licenses/gpl-2.0.html)
   Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-
   ready Text Domain: jolene-child */
 * #top-navigation,
    .img-container { margin-right: auto; margin-left: auto; }
 * .img-container {
    max-width: 890px; }
 * #top-navigation {
    max-width: 810px; }
 * Also following the instructions I made a functions.php file which is as follows:
 * add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles(){
   wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’);
   wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’,
   array(‘parent-style’) ); }
 * After uploading the files I went to preview the child theme and it just looks
   pretty messed up, here’s a zoomed out screen shot [http://imgur.com/mkNQQzT](http://imgur.com/mkNQQzT)
 * Have I made a mistake in the .css or .php files?
 *  Theme Author [cats_456](https://wordpress.org/support/users/cats_456/)
 * (@cats_456)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844353)
 * > Have I made a mistake in the .css or .php files?
 * Well, I see an error at this screenshot. Should be ‘<?php’ added at the beginning
   of functions.php file:
 *     ```
       <?php
       ```
   
 * There is another way of adding custom css, you can activate custom css module
   from [Jetpack](https://wordpress.org/plugins/jetpack/). This can be a better 
   solution if you don’t want change anything except css.
 *  Thread Starter [Scart91](https://wordpress.org/support/users/scart91/)
 * (@scart91)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844361)
 * Ah okay thanks so much for all the help so far, I’ve opted to go for the Jetpack
   plug in. It’s much less hassle than adding removing files etc.
 * I’ve added the CSS code in and things have been resized to how I wanted,
    just
   one small issue now, The nav bar isn’t centred, is there some CSS code I put 
   in with the rest to fix it? [http://www.gandmrecruitment.com/](http://www.gandmrecruitment.com/)
 * I’ll definitely be done asking questions after this one 🙂
 *  Theme Author [cats_456](https://wordpress.org/support/users/cats_456/)
 * (@cats_456)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844368)
 * Hi, Scart91! Sorry, I have gave you too light selector. Please change it to
 *     ```
       header-is-on #top-navigation,
       .img-container {
          margin-right: auto;
          margin-left: auto;
       }
       ```
   
 * Should work (I hope, tested in the browser only).
 *  Thread Starter [Scart91](https://wordpress.org/support/users/scart91/)
 * (@scart91)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844371)
 * I got a bit confused for a while as the code wasnt working, then I realised there
   was a missing “.” for “.header-is-on #top-navigation,”
 * Corrected it and the nav bar is now aligned finally 😀
 * Next I want to move the top logo so it aligns to the left of the contents etc.
   But I’ll work that out myself, I’ve asked enough questions already!
 * Thank you so very much for all the help, couldn’t have done it without you!

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

The topic ‘How to decrease the header image width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/jolene/1.1.6/screenshot.png)
 * Jolene
 * [Support Threads](https://wordpress.org/support/theme/jolene/)
 * [Active Topics](https://wordpress.org/support/theme/jolene/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/jolene/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/jolene/reviews/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [header image](https://wordpress.org/support/topic-tag/header-image/)
 * [max-width](https://wordpress.org/support/topic-tag/max-width/)
 * [Sizing](https://wordpress.org/support/topic-tag/sizing/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 11 replies
 * 3 participants
 * Last reply from: [Scart91](https://wordpress.org/support/users/scart91/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/how-to-decrease-the-header-image-width/#post-5844371)
 * Status: resolved