• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Full Width Header Image To Executive Pro Theme

In this post, i’ll show you how to change the width and height of the header area so your image fits perfectly in that area.

We’ll be adding a full width header which is 1140px x 200px height.

Go to Appearance > Header and you’ll see its very easy to upload your image as long as its exactly the same size as the settings on that page.

Images of exactly 260 × 100 pixels will be used as-is

Header WordPress

If its not, you will be forced to crop your image which is not what you want. So you need to change those settings.

Change Custom Header Width & Height

In your child themes functions.php file, find this code on Line 36 and change it to the exact same size as your header image:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 1140,
	'height'          => 200,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

In this example we’ll use the full width which is 1140px and a height of 200px.

Save the changes you make to this code and now go back to Appearance > Header and upload your image.

Images of exactly 1140 × 200 pixels will be used as-is.

Header new size

Now you can upload your full width image which matches the exact same size as the new values you have changed in your child thems functions file.

But Wait!

It still only displays the default size of 260 x 100.

Modify Header Image Title Area & Site Title Values

Simply add this code to the end of your child themes style.css file to change the width of the Header Image Title Area & Site Title.

/* Header Image Title Area & Site Title
--------------------------------------------- */
.header-image .title-area,
.header-image .site-title,
.header-image .site-title a {
	float: left;
	margin: 0;
	max-width: 1140px;
	min-height: 200px;
	padding: 0;
	width: 100%;
}

Its best to paste this code immediately before the start of your Media Queries near the end of the file.

Here’s the result which fits perfectly.

full width header

Mobile Responsiveness

Making the full width header image responsive on different sized devices is easy. Simply add the code below to each media query for the 5 default sizes already included in this themes style sheet.

.header-image .site-title a {
        background-size: contain !important;
}

Here’s the different sizes the above code needs to be added to.

- max-width: 1200px
		- max-width: 1023px
		- max-width: 767px
		- max-width: 500px
		- max-width: 270px

Example for 500px width screens:

@media only screen and (max-width: 500px) {

	.entry-title {
		font-size: 24px;
		font-size: 2.4rem;
	}

	.content .entry-header .entry-meta .entry-comments-link {
		display: none;
	}
	
	.header-image .site-title a {
        background-size: contain !important;
    }

}

I hope this tutorial gives you a better understanding of how to change the default header image sizes so your image fits perfectly.

Reader Interactions

Comments

  1. Mark Goodkin says

    August 12, 2014 at 5:30 pm

    Hi Brad, I’m using Executive Pro. I’m using a banner logo size of 830x 114. I followed your instructions in modifying the function.php code so the new values reflect this dimension. I also added the code to the css to make the site responsive. As the screen size width shrinks, the logo is resizing as well. However, the site-title height is remaining constant, creating an area of white space below the logo. Please advise on how to remove this white space.

    Log in to Reply
    • Brad Dalton says

      August 12, 2014 at 5:49 pm

      Hello Mark

      Use Firebug to find the class and change the CSS values at the width you want in the Media Queries.

      Log in to Reply
  2. Joseph says

    July 23, 2014 at 8:28 pm

    If I upload the site can you have a look at the issue? This is driving me NUTS!!!!! How can it work on some and not others its the same theme

    Log in to Reply
  3. Joseph says

    July 23, 2014 at 4:41 pm

    Is it just the height that would need adjusting, padding and margin for each screen size is set at 0

    Log in to Reply
    • Joseph says

      July 23, 2014 at 5:35 pm

      Ok, I realised that the class “site-header” had a height of 100px I remove that and it worked. However, on full screen, the slider now overlaps the header image.

      Log in to Reply
  4. Joseph says

    July 22, 2014 at 9:24 pm

    I’m using the embed code…

    @media only screen and (max-width: 270px) {
    
    
    	.header-image .site-title a {
            background-size: contain !important;
    	float:left;
    	margin: 0;
    	height: 38px;
    	padding: 0;
    	width: 100%;
    	}
    	
    }
    Log in to Reply
    • joseph says

      July 22, 2014 at 9:41 pm

      ok that worked

      Log in to Reply
    • Joseph says

      July 22, 2014 at 9:54 pm

      Is that the idea or not ?

      Log in to Reply
      • Brad Dalton says

        July 22, 2014 at 9:57 pm

        That’s it. Change the values so it looks the way you want at that screen size.

        Log in to Reply
        • Joseph says

          July 23, 2014 at 1:23 pm

          I’m still not having any joy, even setting the bottom-padding to -20 in Firebug does nothing. This is on a local host at the moment so I cant give you a link to it

          🙁

          Would that help?

          Log in to Reply
        • Joseph says

          July 23, 2014 at 2:22 pm

          This isnt my site but it uses the same edit and when you change the size of the the window, the amount of space betwen the nav bar and logo increases. This is the problem I am having. I am going to look at the code on the above site to see if it is exactly as mine

          Log in to Reply
          • Brad Dalton says

            July 23, 2014 at 4:16 pm

            You’ll need to change the values for some classes at different screen sizes depending on the size of your logo.

  5. Joseph says

    July 22, 2014 at 9:17 pm

    Sorry I’m being a bit of a Nooob…

    Something like this?

    Log in to Reply
    • Brad Dalton says

      July 22, 2014 at 9:24 pm

      I would need to test that.

      Log in to Reply
  6. Joseph says

    July 22, 2014 at 7:36 pm

    I’m sorry to say but I’m getting white space under my image when I make the browser smaller. The logo reduces in size but there is the gap which is the same size as the large logo height.

    🙁

    Log in to Reply
    • Brad Dalton says

      July 22, 2014 at 7:39 pm

      Hi Joseph.

      You will need to modify the values for the padding, widths and margins at different screen sizes using the CSS in your Media Queries.

      Its impossible to supply CSS which works with different sized images.

      Log in to Reply
      • Joseph says

        July 22, 2014 at 7:42 pm

        I figured… I was being lazy

        Top tips!

        Log in to Reply
  7. Chris says

    July 15, 2014 at 5:04 pm

    Awesome tutorial, simple and right to the point. Been looking around on your site a lot, thanks for all your hard work, it’s very appreciated!

    -Chris

    Log in to Reply
  8. Sharaz says

    July 9, 2014 at 5:34 am

    How do you make the Primary Menu mobile responsive?

    Log in to Reply
    • Brad Dalton says

      July 9, 2014 at 5:39 am

      It is by default as you can see in the Media Queries section of the style sheet.

      Log in to Reply
  9. P Brown says

    July 1, 2014 at 7:57 pm

    In Executive Pro theme, I have put the Header area outside of main content in order to make it full-width. Everything is good except, I have replaced the primary nav in the Home Right Widget area with the Search Bar and Simple Social Icons.

    When I reduce the size to see how this responds on mobile devices, the Search Bar and the Icons stay to the RIGHT (which is what I have had to do to the styling to make it sit Right)

    Is there something else I need to do to the CSS to make this fit centrally when it collapses on mobile devices? I am not familiary with the ‘responsive’ css so some guidance on this before I mess with the code would help…

    Thanks

    Log in to Reply
    • Brad Dalton says

      July 2, 2014 at 4:03 am

      Hello Paula

      Take the original CSS in the Media Queries for the search bar class and modify it so it works with your header modifications.

      You’ll need to write the CSS for the simple social icons.

      Log in to Reply
  10. Julie Galbraith says

    April 23, 2014 at 1:52 pm

    LOVE your tutorials, they are so helpful! I would like to change my header to 350 wide x 100 high. I have done all the changes as you have posted, but with my measurements. My question is, I am using the widget_nav_menu so my nav bar is beside the logo. This widget_nav_menu is too big so it goes to the next line, where/how do I change the size of this widget_nav_menu so that my 350 wide logo and nav fit into the 1140 space? Many thanks! Julie

    Log in to Reply
    • Brad Dalton says

      April 23, 2014 at 2:18 pm

      Hello Julie

      In the Site Header section of most SP child themes style.css file you’ll find CSS for:

      • The title Area
      • Site Header Right Widget Area

      If you change the width of the title area, you should also change the width of the header right widget area to compensate either way.

      Log in to Reply
  11. Scott says

    March 26, 2014 at 3:38 pm

    Executive Pro using a full width header image that’s 1140×339. Settings changed per this tutorial.

    I’m dealing with the excess space under the header issue as well. Padding doesn’t seem to be the problem, but rather the “min-height” settings…at least that’s what Firebug is indicating. If I set the min-height for the header image in each media class, I see no change. I’m currently not running any nav bars…at least until I sort this problem out (dev site).

    What am I missing?

    Log in to Reply
    • Brad Dalton says

      March 26, 2014 at 4:01 pm

      Generally, you only need to change 2 values in the CSS and one in functions for the height and width.

      I would enable your nav menus and see what it looks like and then inspect the space with Firebug to find which class needs modifying.

      Log in to Reply
      • Scott says

        March 26, 2014 at 4:22 pm

        Hi Brian,

        I removed anything additional I added and double-checked code against the tutorial info in css and the functions.php file and re-enabled navigation. No change; still a large gap. Firebug still indicates that the min-height setting is driving the gap, as it is removed when that bit is disabled. Trying the same in the CSS doesn’t change it though…dunno.

        Log in to Reply
  12. Susanna Perkins says

    March 25, 2014 at 2:56 am

    Hi Brad,

    I’m trying to make a full-width header mobile responsive in the Streamline Theme. Existing style.css only has 2 media sizes, not 5. I have tried adding the additional 3 sizes, and reducing padding to zero, but I’m still getting a lot of white space between the header and the menu on the smaller screens.

    Any suggestions?

    Log in to Reply
    • Brad Dalton says

      March 25, 2014 at 4:39 am

      I would use Firebug at different screen sizes and change the classes which need modifying at those sizes.

      There’s no black and white solution because all themes are different and header images can be different sizes.

      Log in to Reply
      • Susanna Perkins says

        March 25, 2014 at 6:36 pm

        Firebug inspection shows it is the h1 class=sitetitle. I’m wondering if the theme is still trying to leave space for the site title even though I’m not using text. Is it possible to just turn that off somewhere??

        Log in to Reply
        • Brad Dalton says

          March 25, 2014 at 7:26 pm

          Yes. Use: display: none;

          Log in to Reply
          • Susanna says

            March 25, 2014 at 7:40 pm

            Yikes! Just added display: none; to site-title section and it stopped displaying the image. Not what I want. Is there another place I should have added the display: none;

            ??

          • Brad Dalton says

            March 25, 2014 at 8:37 pm

            It has to be included in the Media Queries if you want to hide the title on smaller sized screens.

            Example:

            @media only screen and (max-width: 767px) {
            
            	.site-title {
            		display: none;
            	}
            }

            This will hide the site title when the screen is reduced to 767px width.

          • Susanna says

            March 25, 2014 at 9:38 pm

            Tried it. I now have a blank white header area at the smaller sizes.

          • Brad Dalton says

            March 25, 2014 at 9:42 pm

            Thats what it does. Change the class if you wanted to hide another element.

  13. soilland says

    March 20, 2014 at 3:22 am

    Hi Brad,

    Thanks for the tutorial. I’ve amended the size of header as per your tutorial and the header comes into full width. My problems are:

    1.) Mobile responsive: I added the code as shown the following but it seems not to have any impact on any device except 240. I used the Mobile Responsive Design Testing of Studiopress to check the view on each device. It seems to work only on the size 240.

    @media only screen and (max-width: 500px) {
    
    	.header-image .site-title a {
                background-size: contain !important;
       	 }
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
    }

    2.) image size: From the Custom Header section,

    Quote from the Custom Header section
    “You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it.
    Images of exactly 1140 × 200 pixels will be used as-is.”

    My image size is 740 x 150 set out by GIMP application. When I uploaded in the Header of the theme as above. I still need to crop the image before publish it. I wonder why it is so? Isn’t the size of my image is smaller than the size of the request from the header.

    Could you help please?

    Thanks

    Log in to Reply
    • Brad Dalton says

      March 20, 2014 at 11:16 am

      The PHP code which generates the Custom Header page settings will crop your image if its not exactly the same size as the dimensions in the PHP code.

      add_theme_support( 'custom-header', array(
      	'width'           => 740,
      	'height'          => 150,
      	'header-selector' => '.site-title a',
      	'header-text'     => false
      ) );
      Log in to Reply
  14. barbara says

    February 28, 2014 at 2:56 pm

    Hi Brad,
    I am having no luck with the padding issue – I’ve deleted and reduced and it’s not changing the space between the header and the navigation. What am I missing? Has anyone else solved this issue?
    Thank you for any help you can offer!

    Log in to Reply
    • Brad Dalton says

      February 28, 2014 at 3:01 pm

      I cannot see any space between your header and nav menu.

      Do you mean after the slider?

      Or that tiny white line above the slider?

      Line 1287 if you want to remove the padding after the slider:

      .home-middle, .home-top {
          background-color: #E5E1E1;
          clear: both;
          overflow: hidden;
          padding: rem rem 0;
      }
      Log in to Reply
      • barbara says

        February 28, 2014 at 5:32 pm

        Hi
        As I look on my ipad mini and my iphone, there is a huge gap between the navigation and the header…

        I was working on solving the issue so you may looked then. I didn’t solve it…

        Thank you for looking at this…

        Log in to Reply
        • Brad Dalton says

          March 1, 2014 at 12:33 am

          You’ll need to modify the Media Queries to fix that.

          Log in to Reply
  15. Brendon B Clark says

    February 16, 2014 at 10:18 pm

    Hi Brad

    As a newbie to any kind of code, this is a fantastically clear approach and allowed even me to find what you had written, and alter the values to suit my logo, for Executive Pro. I really appreciate that you’ve taken the time to do these.

    Despite that, I didn’t see the change on the Appearance > Header.

    Not sure where to go next?!

    Your thoughts would be welcome.

    Best regards
    Brendon

    Log in to Reply
    • Brad Dalton says

      February 17, 2014 at 1:14 am

      Not sure Brendon because the screenshot proves the solution works and i test every tutorial as i write it.

      Maybe you missed something in the functions file or maybe its caching.

      Log in to Reply
      • Brendon B Clark says

        February 17, 2014 at 3:58 am

        Hi Brad

        Thanks. I’ve pasted the original file back in twice, and changed the function file twice also. Same with the style. No joy anywhere.

        I’m not sure about caching, but I’ve reset whatever I could find to reset and then reloaded the functions and style.

        No luck for now, so will keep tinkering away.

        Thanks for your help.

        Cheers
        Brendon

        Log in to Reply
        • Brad Dalton says

          February 17, 2014 at 5:18 am

          Hard for me to help with localized errors but i know you’ll work it out soon.

          Log in to Reply
  16. Jim says

    February 7, 2014 at 5:45 pm

    Hey, Brad, got it! I had to ALSO change the style.css in the Title Area (not just in the functions.php).

    .title-area {
    	font-weight: 700;
    	float: left;
    	overflow: hidden;
    	width: 1140px;
    
    .header-image .title-area,
    .header-image .site-title,
    .header-image .site-title a {
    	float: left;
    	margin: 0;
    	max-width: 1140px;
    	min-height: 200px;
    	padding: 0;
    	width: 100%;

    WhooHOO, rock’n!

    thanks, jim

    Log in to Reply
    • Brad Dalton says

      February 7, 2014 at 6:13 pm

      Good stuff Jim

      Log in to Reply
  17. Jim says

    February 7, 2014 at 2:27 am

    Hi, Brad –
    Thanks for the initial assist. I believe I followed all your instructions but my banner is not showing across the site.

    A bit more assistance, please?
    thanks!

    Log in to Reply
    • Brad Dalton says

      February 7, 2014 at 8:48 am

      Hello Jim

      Please try again as you have missed something.

      Another option is to use CSS to display your header.

      .site-header {
      background-image: url(images/bg.png);
      }

      Note: Questions which are localized (such as errors, code with restricted access or support issues) cannot be answered accurately. All solutions published on WP Sites (including code) are tested.

      Log in to Reply
      • Jim says

        February 7, 2014 at 5:02 pm

        Hi, Brad. Thanks. I double checked the two steps: altering the functions.php and style.css and they are as you wrote them. Is there a toggle some place that says, ‘turn off the site name text’ (so the header image will show)? That was an issue with older themes. If I do go with your suggestion of using CSS, do I put it in the style.css file and where, and do I need to rename my banner image to bg.png to make it work?
        thanks.

        Log in to Reply
        • Brad Dalton says

          February 7, 2014 at 5:12 pm

          Try the Genesis > Theme Settings.

          Yes, at the end of your child themes style.css file before the start of the Media Queries.

          Log in to Reply
          • Jim says

            February 7, 2014 at 5:17 pm

            Hi, thanks. I took out the Site Title and saved and it had no impact. It is showing the banner corner, but in that original small section – it’s there, just something blocking it.
            Thanks for sticking with me, I appreciate you.

          • Brad Dalton says

            February 7, 2014 at 5:28 pm

            It has something to do with the Values in your CSS for the site header or one of the site header classes. You will need to check all of these which are in the same section of your style sheet.

            When you add the image using the Custom Header uploader, the size should be the same size as your header area which is what you set in your child themes functions file.

            The screen shots contained in this post are the result of following the tutorial.

  18. Michael Jones says

    January 22, 2014 at 5:40 pm

    Brad,

    Thank you very much for the post. It is working great for my site.

    I am looking to have the header image centered AND the navigation centered but seem to be struggling with the later. If you could help, it would be much appreciated.

    Mike

    Log in to Reply
  19. Barbara says

    November 25, 2013 at 6:34 pm

    Thank you for this… Everything is working except the space between the header and the navigation – I’m using executive pro and have reduced padding everywhere I can in the different sizes, but still no luck – I still have the big space between the header and nav on the iphone. What am I missing? I would be very appreciative for any help.
    Thank you.
    Barbara

    Log in to Reply
    • Brad Dalton says

      November 25, 2013 at 7:04 pm

      You’ll need to use Firebug to inspect the space and find the classes which need modifying.

      Then you can add those classes to your Media Queries and reduce the values for padding and/or margins which are causing the space.

      Log in to Reply
  20. Kristy says

    November 12, 2013 at 9:52 am

    Hey Brad,

    A huge thank you for this post, it’s been an awesome help in getting my site to where I want it to be.

    Just one quick question… in reference to padding issues on smaller screens you said in the comments above:

    “You would need to reduce the value for the padding or remove it completely with a zero value for each screen size.”

    Can you help me out with exactly how to do that for each screen size?

    Thanks so much!

    Log in to Reply
    • Brad Dalton says

      November 13, 2013 at 3:00 am

      Kristy.

      It depends on how you added your image and what classes your header image uses.

      @media only screen and (max-width: 270px) {
      
             Your CSS Code
      	
      }
      Log in to Reply
  21. Mark says

    November 4, 2013 at 4:42 am

    How can you add a horizontal line (divider) just below the header that would extend the full widty of th browser window, not just the width of the header/content?

    Log in to Reply
    • Brad Dalton says

      November 4, 2013 at 5:49 am

      You can’t extend it past the site container unless you extend the site container as well. http://www.genesisframework.com/markup.php

      Log in to Reply
  22. Todd says

    November 2, 2013 at 5:16 pm

    Hey Brad,
    Will the header image area still be responsive? Just a question I had.

    Log in to Reply
    • Brad Dalton says

      November 2, 2013 at 6:03 pm

      Absolutely Todd.

      I have added the code to the end of the tutorial which has been tested on all 5 different sized screens.

      Log in to Reply
      • Todd says

        November 3, 2013 at 8:07 pm

        Cool! thanks!

        Log in to Reply
        • Brad Dalton says

          November 3, 2013 at 8:47 pm

          Most of it anyway.

          I added the declaration for contain so the header image centers on all screen sizes which you will need if your image includes text in the center.

          There will be some padding below the image which grows larger as the default height is 200px and the header image reduces in size on smaller screens.

          You would need to reduce the value for the padding or remove it completely with a zero value for each screen size.

          Log in to Reply
          • Todd says

            November 3, 2013 at 9:58 pm

            Yeah, I am really starting to like the idea of much smaller (not as wide) images for these logos and, in fact, I like the idea of using fonts from Google to make that if possible. These 1100 px and 960 px wide header images just can’t really be responsive.

            I like the logo in the center look I am seeing some people are using, great for responsive. We’ll see what I do in the future.

            Thanks for all your tutorials!

            Todd

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.