Categories
Genesis Tutorials

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.

65 replies on “Add Full Width Header Image To Executive Pro Theme”

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.

Hello Mark

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

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

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

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.

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%;
	}
	
}

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?

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

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

By Post Author

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.

🙁

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.

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

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

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

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.

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

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.

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?

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.

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.

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?

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.

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??

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;

??

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.

By Post Author

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

By Post Author

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

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

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!

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;
}

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…

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

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.

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

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

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!

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.

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.

Try the Genesis > Theme Settings.

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

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.

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.

By Post Author

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

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

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.

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!

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
	
}

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?

Absolutely Todd.

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

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.

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

Your email address will not be published. Required fields are marked *